文章/答案/技术大牛

发布

社区首页 >问答首页 >jQuery:重置除当前单击的div以外的所有其他div属性

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

Stack Overflow用户

提问于 2013-10-21 12:13:24

回答 1查看 885关注 0票数 0

我试图使它成为，当我单击一个div时，所有其他div都变成了“取消选择的”(也就是说，只有选择的div的background-image不同，其他的background-image被重置为原始的)，这样只选择/激活了单击。每个div都有一个单独的on/off映像。

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);
    }
});

jquery

css

html

toggle

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-10-21 12:26:16

既然您正在更改的只是样式，那么为什么不创建一个类'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选择器来指定它们。

票数 4

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/19494190

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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