我试图做到这一点,以便当我单击一个div时所有其他div都被``取消选择''(即仅所选div的background-image是不同的,其他div重置为原始),以便仅选中/激活被单击的div。每个div都有一个单独的开/关图像。

http://jsfiddle.net/sergep/5QsCy/

该代码有很多重复。我不太确定如何处理“取消选择”所有其他div(活动div除外)的想法,而不必使用更多的冗余代码。

无论如何,我的jsFiddle是否有整理(即概括和删除冗余)的内容:

$(".gameboy").click(function () {
   var img1 = "url(\"https://cdn3.iconfinder.com/data/icons/funky/136/Game-1-128.png\")";
   var img2 = "url(\"https://cdn3.iconfinder.com/data/icons/funky/136/Game-2-128.png\")";
    if ($(this).css("background-image") == img1) {
        $(this).css("background-image", img2);
    }
    else {
        $(this).css("background-image", img1);
    }
});
$(".switch").click(function () {
   var img1 = "url(\"https://cdn3.iconfinder.com/data/icons/mobiactions/512/turn_off_on_power-128.png\")";
   var img2 = "url(\"http://icdn.pro/images/en/o/n/on-off-icone-4799-128.png\")";
    if ($(this).css("background-image") == img1) {
        $(this).css("background-image", img2);
    }
    else {
        $(this).css("background-image", img1);
    }
});
$(".face").click(function () {
   var img1 = "url(\"https://cdn3.iconfinder.com/data/icons/glyph/227/Smile-128.png\")";
   var img2 = "url(\"https://cdn3.iconfinder.com/data/icons/glyph/227/Pacman-1-128.png\")";
    if ($(this).css("background-image") == img1) {
        $(this).css("background-image", img2);
    }
    else {
        $(this).css("background-image", img1);
    }
});

最佳答案

因为您要更改的只是样式,所以为什么不创建一个“活动”类并将其应用于刚刚单击的div,同时又将该类从其同级div中删除。可以通过一个简单的单击功能将所有内容汇总起来:

$('div').click(function(){
    $(this).siblings('div').removeClass('active');
    $(this).addClass('active');
});


然后只需为每个div的.active类设置CSS样式即可:

.gameboy.active {...}
.switch.active {...}
.face.active {...}


顺便说一下,click函数中的“ div”选择器仅用于示例。您很可能不希望网站上的每个div都可单击,因此我可以为所有这三个div都提供一个类,或者使用更具体的css选择器指定它们

10-05 22:34
查看更多