Question

我正在努力使当我点击div时所有其他div变为'取消选择'（即只有选定的div background-image不同，其他人重置为原始），以便只选择/激活被点击的。每个div都有一个单独的开/关图像。

代码有很多重复。我不确定如何处理“取消选择”所有其他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);
    }
});

Answer 1

因为所有你正在改变的是样式，为什么不创建一个类'active'并将它应用于刚刚单击的div，同时从它的兄弟div中删除该类。所有这些都可以通过一个简单的点击功能来总结：

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

然后只需为每个div的.active类设置样式：

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

顺便说一句，click函数中的'div'选择器仅用于示例。很可能你不希望你网站上的每个div都是可点击的，因此我会给所有这三个div提供一个类，或者使用更具体的css选择器指定它们

jQuery：重置除当前单击的div之外的所有其他div属性

1 个答案: