一次在一个元素上设置 active class

Question

我拥有的是 table 可用 times/date 的表示。用户可以通过单击 link "Choose" 选择时间。单击此 link 时， class "active" 已设置，但我想要的是当用户选择其他时间时，先前的 class 被删除并设置在新元素上仅。

我目前拥有的：

<div class="wrapper-div">
    <div class="row">
        <div class="date">monday, 2015 09 02 </div>
        <div class="time">12:10</div>
        <div class="select"><a href="#">Choose <span class="select-arrow"></span></a>            
   </div>
    </div>
    <div class="row">
        <div class="date">thuesday, 2015 06 22</div>
        <div class="time">12:30</div>
        <div class="select"><a href="#">Choose <span class="select-arrow"></span></a></div>
    </div>
    <div class="row">
        <div class="date">wensday, 2015 02 9</div>
        <div class="time">09:15</div>
        <div class="select"><a href="#">Choose <span class="select-arrow"></span></a></div>
    </div> 
</div>

jQuery代码：

$('.select a').click(function(e){
    e.preventDefault();
    $(this).parents().eq(1).addClass('active');
    $('.wrapper-div div').each(function(){
        removeClass('active');
    });
});

我的工作 fiddle：http://goo.gl/E5hhyn

解决这个问题的最佳方法是什么？

Answer 1

您的 each 语法不正确，因为您没有对任何 jQuery 对象调用 removeClass。无论如何，对 each 本身的需求是多余的。试试这个：

$('.select a').click(function(e){
    e.preventDefault();
    $('.wrapper-div div').removeClass('active'); // remove first
    $(this).parents().eq(1).addClass('active');
});

Answer 2

工作fiddlehttp://jsfiddle.net/gtog33qk/1/

$('.select a').click(function(e){
    e.preventDefault();
    $('.wrapper-div div').each(function(i,e){
        $(e).removeClass('active');
    });
    $(this).closest('.row').addClass('active');

});

只是更改了一点代码，使用 closest 找到完整的活动行，您需要在元素上使用 removeClass，如 Rory 所解释的

Answer 3

您可以使用 jQuery 的 .find() 方法找到要删除的 class，然后使用 jQuery 的 .remove() 方法删除class。 class 现在消失了，只需添加新的 .active class.

Answer 4

您首先添加 Class 然后删除所有 "active" 类，如果您首先删除所有类 "active" 然后将它添加到点击的那个它应该工作。

$('.wrapper-div .row').each(function(){
    $(this).removeClass('active');
});
$(this).parents().find(".row:first").addClass('active');

一次在一个元素上设置 active class

Set active class on one element at the time

html

css

jquery

onclick