Question

我有由DIV元素组成的表格类型结构我制作了一个展开/折叠类型列表。

我有这个图标，如果它展开则我想要更改，如果我折叠列表则重置它。这两个图标链接到两个类。

$('.rowHead_but i', this ).removeClass('icon-double-angle-down');

和

$('.rowHead_but i', this ).addClass('icon-double-angle-up');

好的，它会成功删除该类并添加新类，但它会为所有行执行此操作。

我只希望this行受到影响。

我做错了什么？

<div class="notificationDetail">
<div class="header">
    <div class="Collapse"> 
        <div class="rowHead1"><span>2014-10-10</span></div> 
        <div class="rowHead_but"><i class="icon-double-angle-down"></i></div> 
    </div>
  </div>
 <div class="header">
    <div class="Collapse"> 
        <div class="rowHead2"><span>2014-10-10</span></div> 
        <div class="rowHead_but"><i class="icon-double-angle-down"></i></div> 
    </div>
  </div>
 <div class="header">
    <div class="Collapse"> 
        <div class="rowHead3"><span>2014-10-10</span></div> 
        <div class="rowHead_but"><i class="icon-double-angle-down"></i></div> 
    </div>
</div>
</div>

JQuery代码

    $('.notificationDetail').on('click','.header', function(e){
        e.stopPropagation();



        $(function() {

            var classTst_down = $('.rowHead_but i', this ).hasClass( "icon-double-angle-down" );
            var classTst_up = $('.rowHead_but i', this ).hasClass( "icon-double-angle-up" );

            if ( classTst_down ) {
                console.log('remove down');
                $(this ).removeClass('icon-double-angle-down');
                console.log('removed');
                $(this ).addClass('icon-double-angle-up');
                console.log('added');
            }
            if ( classTst_up ){
                console.log('remove up');
                $(this ).addClass('icon-double-angle-down');
                $(this ).removeClass('icon-double-angle-up');
            }
        });

   });

Answer 1

根据您的理解，您实际上并不想将事件处理程序绑定到.header容器，而是绑定到单个.Collapse项。如果是这样，那么如果您使用toggleClass：

，则可以大大简化您的代码

$('.notificationDetail').on('click', '.Collapse', function (e) {
    e.stopPropagation();
    $('.rowHead_but i', this).toggleClass('icon-double-angle-down icon-double-angle-up');
});

http://jsfiddle.net/7h1gn4cx/

Answer 2

似乎过于复杂。你为什么需要两节课？ - 尝试类似的事情：

$('.notificationDetail .header').click(function() {
    var $el = $(this).find('.rowHead_but i');
    $el.toggleClass('icon-double-angle-down');
});

删除类并在单个元素上添加类

2 个答案: