Question

我所拥有的是可用时间/日期的表格表示。用户可以通过点击链接选择时间＆＃34;选择＆＃34;。当点击此链接时，该课程＆＃34;活跃＆＃34;设置，但我想要的是当用户选择另一个时间删除上一个类并在新元素上设置。

到目前为止我所拥有的：

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

我的工作小提琴：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

工作小提琴http://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');

});

刚刚更改了一些代码，最近用于查找完整的活动行，并且需要在元素上使用removeClass，如Rory所述

Answer 3

您可以使用jQuery的.find（）方法来查找要删除的类，然后使用jQuery的.remove（）方法删除该类。现在课程已经消失，只需添加新的.active类。

Answer 4

首先添加Class并删除所有“活动”类，如果您先删除所有“活动”类，然后将其添加到应该使用的单击类中。

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

一次在一个元素上设置活动类

4 个答案: