Question

我有一个滑块，每张幻灯片都是bool YourBoolHere = true; // or int = 1 for( unsigned int xElement = 0; a < sizeof(x)/sizeof(x[0]); xElement = xElement + 1 ) { for (list<Node*>::iterator itr = Nodes.begin(); itr != Nodes.end(); ++itr) { if(x[xElement] != itr->YourInNodeValueHere) YourBoolHere = false; // or 0 } } return YourBoolHere;。对于每张幻灯片，我想在点击它时切换一个类。但问题是，当我点击幻灯片时，它会在所有幻灯片上添加课程而不是单击的课程。如何解决？

以下是我的代码：

HTML：

<div>

CSS：

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

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

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

jQuery的：

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

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

Answer 1

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

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

Answer 2

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

＆＃13;

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

＆＃13;

.selling-box-slide {
        background-color: #000;
        height: 403px;
        color: white;
    }

    .selling-box-clicked {
        background-color: #fff !important;
      color:black;
    }

＆＃13;

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

＆＃13;

通过jQuery而不是全部选择单个滑块元素

2 个答案: