jQueryから単一のスライダ要素を選択する代わりに

Question

スライダがあり、各スライドは<div>です。スライドごとに、クリックするたびにクラスを切り替えることをお勧めします。しかし、問題は、スライドをクリックすると、クリックされたスライドの代わりにすべてのスライドにクラスが追加されていることです。どのように修正することができますか？

以下

は私のコードです：

HTML：

<div class="selling-box-slider"> 
    <div class="selling-box-slide"></div> 

    <div class="selling-box-slide"></div> 

    <div class="selling-box-slide"></div> 
</div> 

CSS：

.selling-box-slide { 
    background-color: #000; 
    height: 403px; 
} 

.selling-box-clicked { 
    background-color: #fff !important; 
} 

のjQuery：

jQuery(".selling-box-slide").click(function() { 
    jQuery('.selling-box-slide').toggleClass('selling-box-clicked'); 
}); 

Answer 1

クリックハンドラー内にthisの値を使用します。

jQuery(".selling-box-slide").click(function() { 
    jQuery(this).toggleClass('selling-box-clicked'); 
}); 

Answer 2

あなたは以下のように適切なdiv要素を選択するために、イベントのターゲットを使用することができます：イベントハンドラ内this値は、イベントを生成したターゲット要素を指します。

jQuery(".selling-box-slide").click(function(event) { 
 
     $(event.target).toggleClass('selling-box-clicked'); 
 
    });

.selling-box-slide { 
 
     background-color: #000; 
 
     height: 403px; 
 
     color: white; 
 
    } 
 

 
    .selling-box-clicked { 
 
     background-color: #fff !important; 
 
     color:black; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="selling-box-slider"> 
 
      <div class="selling-box-slide">box 1</div> 
 

 
      <div class="selling-box-slide">box 2</div> 
 

 
      <div class="selling-box-slide">box 3</div> 
 
    </div>