0

我正在努力做到这一点，以便当我单击一个 div 时，所有其他 div 都变为“取消选择”（即只有选定的 divbackground-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);
    }
});
4

1 回答 1

4

由于您要更改的只是样式，为什么不创建一个“活动”类并将其应用于刚刚单击的 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 都是可点击的，因此我会为所有 3 个 div 提供一个类，或者使用更具体的 css 选择器指定它们

于 2013-10-21T12:26:16.003 回答