0

私はこのような効果を構築しようとしています: .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() では機能しないので、何が問題なのでしょうか?

4

2 に答える 2

0

クリックすると DOM 階層が上昇するため、.labelElement でクリック イベントがトリガーされ、削除されたばかりのクラスが再度追加されます。

バブリングを防ぐには e.stopPropagation() を使用します。

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

または、この質問への回答を参照してください。

.parents().removeClass() が機能しない

于 2017-03-21T18:02:52.723 に答える