jquery - 关于从父元素中移除类

Question

我试图构建这样的效果：单击 .labelElment 以更改其自身大小，然后单击另一个块或 a.close 以恢复 .labelElment 的大小。

看一下html：

<div id="labelGroup">
        <div  class="labelElement c1">
            <div class="panel">
                <span class="avatar"></span>
                  <ul class="labelGroup">
                    <li class="l1">Label 1</li>
                    <li class="l2">Label 2</li>
                    <li class="l3">Label 3</li>                
                  </ul>
             </div>
             <div class="info">
                 <ul>
                     <li>Information</li>
                     <li><a href="###" class="close">close</a></li>

                 </ul>
            </div>
        </div>


        <div  class="labelElement c2">Block</div>    


    </div>

和jQuery代码：

$('#labelGroup').delegate( '.labelElement', 'click', function(){

 $('.labelElement').removeClass('s1')
 $(this).addClass('s1');
 $('#labelGroup').isotope('reLayout');
});

$('.close').click( function(e){
        $(this).parents(".labelElement").removeClass("s1");
 });

在 .delegat() 中，removeClass 运行良好，但在 .click() 中，它不起作用，那么问题是什么？

Answer 1

你可以试试这个：

$(this).closest('.labelElement').removeClass("s1");

Answer 2

您的点击会使 DOM 层次结构冒泡，因此也会触发 .labelElement 上的点击事件并重新添加刚刚删除的类。

使用 e.stopPropagation() 来防止冒泡。

https://api.jquery.com/event.stopPropagation

或查看此问题的答案：

.parents().removeClass() 不工作