より短いjquery/javascriptでdivに複数のIDを短縮する

Question

私はこれを達成したい：

私は30の白い円を持っています。各白い円は、それが金色か銀色かに関係なく、新しい画像オプションへのポップアップを引き起こします。

金をクリックすると、以前にクリックされた円は金色に変わり、他の29は白いままになります。 その金の円が再びクリックされたとき、私は銀を選ぶことができ、それは銀に変わり、他は白く残る。

各サークルに30個のID /クラスを与えずにこれを行うにはどうすればよいですか？

$(document).ready(function(){ 
 
    $(".circle").click(function(){ 
 
     $(".silver , .gold").toggle(); 
 
    }); 
 

 
});

.circle{ 
 
\t border-radius: 50%; 
 
\t border: solid 1px black; 
 
\t width: 30px; 
 
\t height: 30px; 
 
\t background: none; 
 
\t position: relative; 
 
\t cursor: pointer; 
 
} 
 
.silver, 
 
.gold{ 
 
\t display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="silver" onclick="addsilver();"><img src="images/silver.png" width="40"></div> 
 
    <div class="silver" onclick="addgold();"><img src="images/silver.png" width="40"></div> 
 

 
    <div class="circle" id="c1"></div> 
 
    <div class="circle" id="c2"></div> 
 
    <div class="circle" id="c3"></div> 
 
    <div class="circle" id="c4"></div> 
 
    <div class="circle" id="c5"></div>

Answer 1

に申し訳ありません私の英語は十分ではない、解決策を理解するためにコードスニペットを参照してください。ここ

おかげ

は私のコード（だけ例えば4円を与える）であります説明してください。

var currentCircleId = ''; 
 

 
$(document).ready(function(){ 
 
    
 
    $(".circle").click(function(){ 
 
     $(".selection").toggle(); 
 
     currentCircleId = $(this).attr('id'); 
 
    }); 
 
    $('.selection').click(function(){ 
 
     $(".selection").toggle(); 
 
     var newClass = $(this).data('new-class'); 
 
     $('#' + currentCircleId).removeClass('gold silver').addClass(newClass); 
 
    }); 
 
    
 

 
});

.circle{ 
 
\t border-radius: 50%; 
 
\t border: solid 1px black; 
 
\t width: 30px; 
 
\t height: 30px; 
 
\t background: none; 
 
\t position: relative; 
 
\t cursor: pointer; 
 
    float: left; 
 
} 
 
.silver { 
 
    background-color: silver; 
 
} 
 
.gold{ 
 
\t background-color: yellow; 
 
} 
 
.selection { 
 
    display: none; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 

 
<div class="selection" data-new-class="gold">Gold</div> 
 
<div class="selection" data-new-class="silver">Silver</div> 
 

 
    <div class="circle" id="c1"></div> 
 
    <div class="circle" id="c2"></div> 
 
    <div class="circle" id="c3"></div> 
 
    <div class="circle" id="c4"></div> 
 
    <div class="circle" id="c5"></div>