通过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');
});

- cup_of

Answer 1

在点击事件处理程序中使用this值。事件处理程序中的this值指的是生成事件的目标元素:

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

- Mohammad Usman

---

太棒了，这个完美地解决了问题。谢谢！大约10分钟后我会接受这个答案。再次感谢。 - cup_of

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>

- ghg565

---

谢谢你的回答！我相信这会起作用，但是穆罕默德比你先回答了一点：D。不过我还是给你点了个赞。 - cup_of