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

remove class and add class on single element

本文关键字：元素 单个 添加      更新时间：2023-09-26

我有一个由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');
            }
        });
   });

根据您的理解，您实际上并不想将事件处理程序绑定到.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/

看起来过于复杂。你为什么需要两节课？-试试这样的东西：

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