JQuery - ボディのクリックで追加されたクラスを削除します

以下のスニペットまたはこれをチェックしてくださいfiddler。私はそれが.myDiv JQuery - ボディのクリックで追加されたクラスを削除します

をクリックしながら、body上の他の場所をクリックしたときに.myBackgroundを削除.myBackgroundクラスを追加し

で、スニペットの下から二つのことを達成したかったです。

これらを個別に試しているときは、問題なく動作しています。しかし、私は両方を達成しようとすると一緒に期待どおりに動作しません。私は両方のクリックイベントがdivをクリックすると解雇されることを知っているので、.myBackgroundは追加されません。私の要件を達成する他の方法はありますか？

$(document).ready(function() { 
 
    $(document).on('click', '.myDiv', function() { 
 
    $(this).addClass('myBackground'); 
 
    }); 
 
    $(document).on('click', 'body', function() { 
 
    $('.myDiv.myBackground').removeClass('myBackground'); 
 
    }) 
 
});

.myDiv { 
 
    height: 100px; 
 
    width: 100%; 
 
    background: cyan; 
 
} 
 

 
.myBackground { 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="myDiv"> 
 
</div>

すべてのヘルプ高く評価しました。前もって感謝します。

出典

2017-09-13 RaJesh RiJo

あなたは要素が.myBackground/myDiv要素

$(document).ready(function() { 
 
    $(document).on('click', '.myDiv', function() { 
 
    $(this).addClass('myBackground'); 
 
    }); 
 
    $(document).on('click', 'body', function(e) { 
 
    if (!$(e.target).is('.myBackground')) 
 
     $('.myBackground').removeClass('myBackground'); 
 
    }) 
 
});

body { 
 
    height: 200px; 
 
    width: 100%; 
 
} 
 

 
.myDiv { 
 
    height: 100px; 
 
    width: 100%; 
 
    background: cyan; 
 
} 
 

 
.myBackground { 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 
    <div class="myDiv"> 
 
    </div> 
 
</body>

ない場合にのみ削除をトリガーする場合ので、あなたは、それは両方のクリックを登録する]をクリック使用するときにあなたの体の要素を持っています

出典

2017-09-13 07:10:21 madalinivascu

あなたが

e.stopPropagation()

ドを追加することにより、身体のレベルまでアップを伝播するイベントを停止する必要がありますMO

$(document).ready(function() { 
 
    $(document).on('click', '.myDiv', function(e) { 
 
    $(this).addClass('myBackground'); 
 
    e.stopPropagation() 
 
    }); 
 
    $(document).on('click', 'body', function() { 
 
    $('.myDiv.myBackground').removeClass('myBackground'); 
 
    }) 
 
});

body 
 
{ 
 
    height: 200px; 
 
    width: 100%; 
 
} 
 

 
.myDiv { 
 
    height: 100px; 
 
    width: 100%; 
 
    background: cyan; 
 
} 
 

 
.myBackground { 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
<div class="myDiv"> 
 
</div> 
 
</body>

出典

2017-09-13 07:10:23 gurvinder372

あなたはe.stopProgation（）を追加する必要があります。 some more info about it

var addBackground = function(e){ 
 
    e.stopPropagation(); 
 
    $('.myDiv').addClass('myBackground'); 
 
}; 
 

 
var removeBackground = function(){ 
 
    $('.myDiv.myBackground').removeClass('myBackground'); 
 
}; 
 

 
$(document).ready(function() { 
 
    $('.myDiv').on('click',addBackground); 
 
    $('body').on('click',removeBackground); 
 
});

.myDiv { 
 
    height: 100px; 
 
    width: 100%; 
 
    background: cyan; 
 
} 
 

 
.myBackground { 
 
    background: red; 
 
} 
 

 
body 
 
{ 
 
    height: 1000px; 
 
    width: 100%; 
 
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
<body> 
 
<div class="myDiv"> 
 
</div> 
 
</body>

出典

2017-09-13 07:14:46 Steven

$(function(){ 
 

 
\t $(document).on('click', 'body', function(e) { 
 
\t  if ($(e.target).hasClass('myBackground')) 
 
\t   $('.myDiv').removeClass('myBackground'); 
 
\t  else if ($(e.target).hasClass('myDiv')) 
 
\t   $('.myDiv').addClass('myBackground'); 
 
\t }); 
 
\t 
 
});

body { 
 
    height: 200px; 
 
    width: 100%; 
 
} 
 

 
.myDiv { 
 
    height: 100px; 
 
    width: 100%; 
 
    background: cyan; 
 
} 
 

 
.myBackground { 
 
    background: red; 
 
}

<div class="myDiv"></div> 
 

 

 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

$(function(){ 

    $(document).on('click', 'body', function(e) { 
     if ($(e.target).hasClass('myBackground')) 
      $('.myDiv').removeClass('myBackground'); 
     else if ($(e.target).hasClass('myDiv')) 
      $('.myDiv').addClass('myBackground'); 
    }); 

});

これを試してみてください

出典

2017-09-13 07:28:46

JQuery - ボディのクリックで追加されたクラスを削除します

答えて

関連する問題