我想实现这一目标:
我有30个白色圆圈。每个白色圆圈(无论是金色还是银色)都将触发一个弹出到新图像选项的按钮。
当我单击金色时,先前单击的圆圈将变为金色,而其他29个圆圈保持白色。
当那个金色的圆圈再次单击时,我可以选择银色,它将变成银色,而另一个保持白色。
如何在不给每个圆圈30个ID /类的情况下做到这一点?
谢谢
这是我的代码(例如,仅给出4个圆圈):
$(document).ready(function(){
$(".circle").click(function(){
$(".silver , .gold").toggle();
});
});
.circle{
border-radius: 50%;
border: solid 1px black;
width: 30px;
height: 30px;
background: none;
position: relative;
cursor: pointer;
}
.silver,
.gold{
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>
最佳答案
查看代码片段以了解解决方案
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{
border-radius: 50%;
border: solid 1px black;
width: 30px;
height: 30px;
background: none;
position: relative;
cursor: pointer;
float: left;
}
.silver {
background-color: silver;
}
.gold{
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>