通过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值。在事件处理中this值是指生成事件的目标元素：

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

Answer 2

您可以使用事件的目标选择适当的股利如下。

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>