只允许使用jQuery一个活动的div

Question

假设我有三个具有class item的div，每次只能有一个div拥有classactive。例如：

<div class="item active">1</div>
<div class="item">2</div>
<div class="item">3</div>

我有一个jQuery绑定代码，它在点击事件上激活一个div：

$(document).ready(function () {
    $('.item').bind('click', function() {
        addClass('active');        
        // now I need to remove active class from the previous selected item
    });
});

如何做到最好的技术实现，以便我能清理其他可能处于活动状态的div并移除其活动类？

提前感谢您的帮助。

- Allen Liu

Answer 1

您需要使用$(this).addClass，而不是仅仅使用它本身。同时，您可以预先从所有带有active类的元素中移除active类，像这样：

$(document).ready(function () {
    $('.item').bind('click', function() {
        // remove the active class from all elements with active class
        $('.active').removeClass('active')
        // add active class to clicked element
        $(this).addClass('active');
    });
});

- Billy Moon

---

实际上，我喜欢这个，因为它不需要查看任何其他的.item div。如果有很多div，应该会很快。 - Allen Liu

Answer 2

作为一条简短的命令，您可以添加活动类，然后从所有兄弟节点中删除它。

$(this).addClass('active').siblings().removeClass('active')

请查看演示： http://jsfiddle.net/nAnpn/1/

- Billy Moon

---

兄弟，你太棒了！现在我救了，哈哈 :D - Ivan

Answer 3

Working Demo

 $(document).ready(function() {
        $('.item').bind('click', function() {
            $('.item').removeClass('active').filter($(this)).addClass('active');
        });
    });

- Sahil Muthoo

Answer 4

这可以做到：

$(document).ready(function () {
    var $items = $('.item');
    $items.bind('click', function() {
        $items.removeClass('active');
        $(this).addClass('active');
    });
});

使用此解决方案，您只需查找项目一次。因此请记住，将来的.item元素可能不会按照预期工作，但速度会更快。

- KARASZI István

Answer 5

$(this).siblings().removeClass('active');

- simoncereska

Answer 6

在将其添加到新元素之前，只需从所有类为item的div中删除它：

$('.item').removeClass('active');
$(this).addClass('active');

这样你就不必担心追踪以前的活动元素，只需从所有元素中删除并添加到选定的元素中即可。

- davidethell

Answer 7

在添加“active”类之前，您应该删除当前的“active”类。

$(document).ready(function () {
    $('.item').bind('click', function() {
        addClass('active');        
        $('.item').removeClass('active');
    });
});

- mathieug

Answer 8

我曾经遇到过类似的问题，想分享一下解决方法。这种方法能够保留移除其他元素的活动类的能力，并且允许单击的元素在需要时进行切换。

$(".item").click(function(){
    $('.active').not(this).removeClass('active');
    $(this).toggleClass('active');      
});

​

- G. Lucas Roe

Answer 9

嗯，我在这方面不是很擅长，但是只删除类并再次添加项目如何：

$('div').removeClass('item active').addClass('item');

- Mausoleum

Answer 10

首先，我建议将它们全部放在一个容器中。然后，您可以从所有同级元素中删除active类（以防您想要在页面上有多个项目组）。

$(function() {
  $(".item").click(function() {
    var $this = $(this);                           // store jQuery object
    $this.siblings(".item").removeClass("active"); // remove from all .items
    $this.addClass("active");                      // add to clicked item
  });
});

jsFiddle示例

请注意，如果您正在设计最好用单选按钮表示的内容，则可以使用HTML和CSS对选中元素进行基本样式设置：

表单的HTML+CSS示例

- brymck