jquery互斥点击答案

【问题标题】：jquery mutually exclusive clickjquery互斥点击
【发布时间】：2010-10-03 22:16:57
【问题描述】：

我有 3 个 div，每个 div 有 2 个可能的图像标签（活动或非活动）。如果单击一个 div 以激活其他 div，则必须将其设置为非活动。如何使用 img 标签完成此操作，如果用户禁用了 javascript 会发生什么？

【问题讨论】：

您能否通过添加示例 HTML 来说明情况来澄清一下？
行为与此处的向上/向下投票相同，但也带有第三个箭头。

【解决方案1】：

你的意思是这样的吗？

<div class="block" id="block1">
    <img src='inactive_block1.jpg'>
</div>

<div class="block" id="block2">
    <img src='inactive_block2.jpg'>
</div>

<div class="block" id="block3">
    <img src='inactive_block3.jpg'>
</div>

使用像 jQuery 这样的库，javascript 看起来像：

$(function() {
    $('.block').click(function() {
       $('#block1').find('img').attr('src', 'inactive_block1.jpg');
       $('#block2').find('img').attr('src', 'inactive_block2.jpg');
       $('#block3').find('img').attr('src', 'inactive_block3.jpg');
       $(this).find('img').attr('src', 'active_' + $(this).attr('id') + '.jpg');
    });
});

有了上面，如果你有inactive_block1.jpg、inactive_block2.jpg、inactive_block3.jpg和active_block1.jpg、active_block2.jpg和active_block3.jpg你应该得到你想要的。

是否值得禁用 javascript 回退取决于您，这主要取决于您是否希望大量受众禁用 javascript。

【讨论】：

在每个 div 中我希望有一个 img 标签，而不是 css 背景。
谢谢，但另一个转折点......每个 div 中的非活动和活动 jpg 都不相同......
糟糕。我有几个错误。修复。现在就试试。 html 和 javascript 都改变了，所以是的。

【解决方案2】：

如果用户禁用了 JavaScript，则您无法使用基于 JavaScript 的方式来处理动态修改页面。您唯一的其他选择是创建功能的“已弃用”版本，每次点击后都需要一个页面请求。

我建议研究如何从 DOM 中的元素中动态添加/删除类，这就是我解决这个问题的方法。您可以轻松地为单击时“活动”的所有元素执行 jQuery 选择，并在它们上设置一个“禁用”类，这样您实际上就可以屏蔽除您单击的元素之外的所有内容。

这有意义吗？

【讨论】：

所以我会将所有活动和非活动图像标签都放在 html 中。并添加删除类以禁用它们？或者如上所述并在单击时指定 src？