我的页面上有 8 张图片，一栏 4 张，另一栏 4 张。
当我单击第一列 (panel1) 中的任何图像时，我可以看到图像顶部出现一个圆圈，表明它已被选中。
当我单击另一列(panel2)中的任何图像时，图像会稍微淡出但没有显示圆圈。
<div class="row col-xs-12 margin0">
<div class="col-xs-12 col-sm-6 col-md-3 productmargintop5 paddingRound productsLeft">
<div class="boxTop"></div>
<div class="box" id="panel1">
<div class="row col-xs-12 margin0" style="margin-left:-8%">
<div class="col-md-6 col-xs-6">
<img src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1424145153/black_cherries_snbvu8.png" data-id="1" alt="" data-name="blackcherry" />
</div>
<div class="col-md-6 col-xs-6">
<img src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1424145152/coconut_psdlax.png" data-id="2" alt="" data-name="coconut" />
</div>
</div>
<div class="clearfix"></div>
<div class="marginBottom10 visible-xs-block"></div>
<div class="row col-xs-12 margin0" style="margin-left:-8%">
<div class="col-md-6 col-xs-6">
<img src="//res.cloudinary.com/dncu6pqpm/image/upload/v1424145152/mango_p3tjp5.png" data-id="3" alt="" data-name="mango" />
</div>
<div class="col-md-6 col-xs-6">
<img src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1424145152/strawberries_s1da7u.png" data-id="4" alt="" data-name="strawberries" />
</div>
</div>
<div class="clearfix"></div>
<div class="marginBottom10 visible-xs-block"></div>
</div>
<div class="boxBtm"></div>
</div>
<div class="col-xs-12 col-sm-6 col-md-1 productmargintop5 paddingRound productsLeft" style="top:40%; left: 4%; position:relative"> + </div>
<div class="col-xs-12 col-sm-6 col-md-3 productmargintop5 paddingRound productsLeft">
<div class="boxTop"></div>
<div class="box" id="panel2">
<div class="row col-xs-12 margin0" style="margin-left:-6%">
<div class="col-md-6 col-xs-6">
<img src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1424145156/chocolate_lxphco.png" data-id="1" alt="" data-name="chocolate" />
</div>
<div class="col-md-6 col-xs-6">
<img src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1424145156/cinnamon_o8nbos.png" data-id="2" alt="" data-name="cinnamon" />
</div>
</div>
<div class="clearfix"></div>
<div class="marginBottom10 visible-xs-block"></div>
<div class="row col-xs-12 margin0" style="margin-left:-6%">
<div class="col-md-6 col-xs-6">
<img src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1424145156/honey_lawjsz.png" data-id="3" alt="" data-name="honey" />
</div>
<div class="col-md-6 col-xs-6">
<img src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1424145156/vanilla_qptl2d.png" data-id="4" alt="" data-name="vanilla" />
</div>
</div>
<div class="clearfix"></div>
<div class="marginBottom10 visible-xs-block"></div>
</div>
<div class="boxBtm"></div>
</div>
<div class="col-xs-12 col-sm-6 col-md-1 productmargintop5 paddingRound productsLeft" style="top:40%; left: 4%; position:relative"> = </div>
<div class="col-xs-12 col-sm-6 col-md-3 productmargintop5 paddingRound productsLeft">
<div class="boxTop"></div>
<div class="box">
</div>
<div class="boxBtm"></div>
</div>
</div>
和我的脚本
$(document).ready(function () {
// Panel1 is working as expected
$("#panel1 .row img").click(function () {
$("#panel1 .row img").removeClass("BlackcherryCircle");
$("#panel1 .row img").removeClass("CoconutCirle");
$("#panel1 .row img").removeClass("MangoCircle");
$("#panel1 .row img").removeClass("StrawberryCircle");
$("#hdnPanel1").val('');
var name = $(this).attr("data-name");
var id = $(this).attr("data-id");
switch (name) {
case "blackcherry":
$(this).addClass('BlackcherryCircle');
break;
case "coconut":
$(this).addClass('CoconutCirle');
break;
case "mango":
$(this).addClass('MangoCircle');
break;
case "strawberries":
$(this).addClass('StrawberryCircle');
break;
default:
}
$("#hdnPanel1").val(id);
});
// Panel2 has the issue it will not apply the CSS Class for the image clicked
$("#panel2 .row img").click(function () {
$("#panel2 .row img").removeClass("ChocolateCircle");
$("#panel2 .row img").removeClass("CinnamonCircle");
$("#panel2 .row img").removeClass("HoneyCircle");
$("#panel2 .row img").removeClass("VanillaCircle");
$("#hdnPanel2").val('');
var name = $(this).attr("data-name");
var id = $(this).attr("data-id");
switch (name) {
case "chocolate":
$(this).addClass('ChocolateCircle'); // Will not apply the CSS Class
break;
case "cinnamon":
$(this).addClass('CinnamonCircle'); // Will not apply the CSS Class
break;
case "honey":
$(this).addClass('HoneyCircle'); // Will not apply the CSS Class
break;
case "vanilla":
$(this).addClass('VanillaCircle'); // Will not apply the CSS Class
break;
default:
}
$("#hdnPanel2").val(id);
});
});
我创建了一个 JSFiddle here因为我不是 100% 确定出了什么问题，所以不会显示圆圈的图像在 panel2 内
最佳答案
我认为问题出在图像上...第一个面板中的图像具有透明背景，而第二个面板中的图像则没有透明背景。
所以尽量使用透明背景的图片
body {
background-color: lightgrey;
}<img src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1424145153/black_cherries_snbvu8.png" data-id="1" alt="" data-name="blackcherry" />
<img src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1424145156/honey_lawjsz.png" data-id="3" alt="" data-name="honey" />关于javascript - 单击图像时不出现圆圈，但对其他人有效，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28554517/