どの要素がクリックされたのかを知り、クラスをそれにトグルする方法？ JS jQueryの

Question

私はクラスworkで、このような4 divsを持っている：

<div class="work"> 
    <img src="panda.jpg"> 
    <h3>Panda</h3> 
    <p>Panda eats apple.</p> 
</div> 

そして私はdivをクリックするclickedクラスを切り替えたい：

.clicked { 
font-size: 25px; 
} 

それを行うには？

Answer 1

jqueryにはtoggleClassという名前の関数があります。

divにclickイベントをアタッチし、thisを使用してクリックした要素を参照する必要があります。

$('.work').click(function() { // edited: from $(.work) to $('.work') 
    $(this).toggleClass("click") 
}) 

Answer 2

Jqueryにはそのための方法があります。

$('.work').click(function(e) { 
    $(e.target).closest('.work').toggleClass('clicked'); 
}); 

.closest()等

Answer 3

$('.work').on('click', function() { 
    $(this).toggleClass('clicked'); 
}) 

もぉ、ケースのクリックが含まれている画像の上に登録された中で、なぜあなただ​​けのドキュメントをチェックして行くことができませんでした！

Answer 4

あなたが唯一のクラス.work付きのdivののは、一度に.clickedクラスを持つようにしたい場合は、ここであなたは何をすべきかです：

$('.work').on('click', function() { //When the div 'work' is clicked 

    $('.work').removeClass('clicked'); //Remove the class 'clicked' from all divs named 'work' 

    $(this).addClass('clicked');  //Add the class 'clicked' to the div that was clicked. 

}); 

は、ここで同じのためfiddleです。ここで

Answer 5

私はjQuery兄弟方法とともにaddClass & removeClassを使用しましたソリューションhttps://jsfiddle.net/7ep3e4gn/

$('div.work').click(function(){  
 
    $(this).addClass('clicked').siblings('div.work').removeClass('clicked'); 
 
});

.clicked { 
 
font-size: 25px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="work"> 
 
    <img src="panda.jpg"> 
 
    <h3>Panda</h3> 
 
    <p>Panda eats apple.</p> 
 
</div> 
 
<div class="work"> 
 
    <img src="panda.jpg"> 
 
    <h3>Panda2</h3> 
 
    <p>Panda2 eats apple.</p> 
 
</div> 
 
<div class="work"> 
 
    <img src="panda.jpg"> 
 
    <h3>Panda3</h3> 
 
    <p>Panda3 eats apple.</p> 
 
</div>

で行きます。

希望すると、これが役立ちます。