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

Question

我有由DIV元素组成的表类型结构。

我已经做了一个展开/折叠类型列表。

我有一个图标，我想要改变，如果它扩展，并重新设置它，如果我崩溃的列表。这两个图标被链接到两个类。

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

和

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

好的，它成功地删除了类并添加了新的类，但是它对所有行都是这样做的。

我只希望this行受到影响。

我做错什么了？

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