通过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

您可以使用事件的目标来选择合适的div，如下所示。

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>