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

Question

我试图做到这一点，以便当我点击一个 div 时，所有其他 div 都变成“取消选择”(即只有选定的 div 的 background-image 不同，其他重置为原始状态)，这样只有被点击的才会被选中/激活。每个 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);
    }
});

Answer 1

既然您要更改的只是样式，为什么不创建一个“active”类并将其应用于刚刚单击的 div，同时从其同级 div 中删除该类。都可以用一个简单的点击功能来概括:

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

然后为每个 div 的 .active 类设置你的 css 样式:

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

顺便说一句，点击函数中的“div”选择器只是为了示例。您很可能不希望您网站上的每个 div 都可以点击，因此我要么为所有 3 个 div 指定一个类，要么使用更具体的 css 选择器指定它们