Question

我想实现这个目标：

我有30个白色圆圈。每个白色圆圈都会触发弹出一个新图像选项，无论它是金色还是银色。

当我点击黄金时，先前点击的圆圈将变为金色，而其他29个圆圈将保持白色。当那个金色圆圈再次点击时，我可以选择银色，它会变成银色，而另一个则保持白色。

如何在不给每个圈子提供30个ID /类的情况下如何做到这一点？

感谢

这是我的代码（例如只给出4个圆圈）：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

请参阅代码段以了解解决方案

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>

使用较短的jquery / javascript缩短div上的多个ID

1 个答案: