jQuery .next（）正在向所有元素添加类

Question

我有一个Bootstrap 4 Carousel，并且我尝试在滑块更改时向<a>元素添加一个类。我可以添加类.highlight，但它将其添加到每个接下来的<a>元素中。

函数的另一部分从.highlight标签一次删除了<a>类，但是当幻灯片再次更改时，它不会在其他两张幻灯片上复制。

我查阅了jQuery文档，甚至在StackOverflow上也仔细跟踪了另一个类似问题的回答，但是没有运气。

因此，当Bootstrap滑块发生更改时，它将按预期删除一次该类，并将高亮显示类添加到接下来的两个元素中，而不只是一个元素。当引导滑块再次更改时，它不会删除该类，并且最后两个元素保持突出显示状态。我希望一次只突出显示一个，当它更改时，要删除突出显示并将其应用于下一个。

我真的很想了解我的逻辑存在缺陷的地方并找到解决方案，因此我在代码旁边添加了注释，以解释我的思考过程。感谢您的帮助。

$("#carouselExampleIndicators").on('slide.bs.carousel', function() {
  var currentSlide = $('.feature-box'); //I set a variable for the .feature-box class that is the containing div that shares space with the highlight class
  currentSlide.removeClass("highlight"); //I am trying to remove the highlight class from the current .feature-box slide it works once but does not happen again when the slide changes
  currentSlide.next().addClass("highlight"); //I thought this would select the NEXT element (just one) and add the class highlight - instead it chooses the BOTH of the NEXT elements and adds the class
});

.highlight a {
  color: #FFF !important;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>


<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active" style="background-image: url('https://source.unsplash.com/LAaSoL0LrYs/1920x1080')">
      <div class="carousel-caption d-none d-md-block">
        <h2 class="display-4">First Slide</h2>
        <p class="lead">This is a description for the first slide.</p>
      </div>
    </div>
    <div class="carousel-item" style="background-image: url('https://source.unsplash.com/bF2vsubyHcQ/1920x1080')">
      <div class="carousel-caption d-none d-md-block">
        <h2 class="display-4">Second Slide</h2>
        <p class="lead">This is a description for the second slide.</p>
      </div>
    </div>
    <div class="carousel-item" style="background-image: url('https://source.unsplash.com/szFUQoyvrxM/1920x1080')">
      <div class="carousel-caption d-none d-md-block">
        <h2 class="display-4">Third Slide</h2>
        <p class="lead">This is a description for the third slide.</p>
      </div>
    </div>

    <div class="container-fluid">
      <div class="row this-row">
        <div class="col-sm-4 feature-box highlight">
          <a data-target="#carouselExampleIndicators" data-slide-to="0" class="active carousel-slide">01 This is another article name</a>
        </div>
        <div class="col-sm-4 feature-box">
          <a data-target="#carouselExampleIndicators" data-slide-to="1" class="carousel-slide">02 This is yet another article name to promote it</a>
        </div>
        <div class="col-sm-4 feature-box">
          <a data-target="#carouselExampleIndicators" data-slide-to="2" class="carousel-slide">I am the last of my kind but I too am a article</a>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

您要让jquery在所有3个.feature-box div之后接受下一个同级。而是考虑下面的代码

$("#carouselExampleIndicators").on('slide.bs.carousel', function(e){
  console.log(e.to);
  $('.feature-box.highlight').removeClass('highlight')
  $('.feature-box').eq(e.to).addClass('highlight');
});

.highlight a {
  color: #C00 !important;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>


<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active" style="background-image: url('https://source.unsplash.com/LAaSoL0LrYs/1920x1080')">
      <div class="carousel-caption d-none d-md-block">
        <h2 class="display-4">First Slide</h2>
        <p class="lead">This is a description for the first slide.</p>
      </div>
    </div>
    <div class="carousel-item" style="background-image: url('https://source.unsplash.com/bF2vsubyHcQ/1920x1080')">
      <div class="carousel-caption d-none d-md-block">
        <h2 class="display-4">Second Slide</h2>
        <p class="lead">This is a description for the second slide.</p>
      </div>
    </div>
    <div class="carousel-item" style="background-image: url('https://source.unsplash.com/szFUQoyvrxM/1920x1080')">
      <div class="carousel-caption d-none d-md-block">
        <h2 class="display-4">Third Slide</h2>
        <p class="lead">This is a description for the third slide.</p>
      </div>
    </div>

    <div class="container-fluid">
      <div class="row this-row">
        <div class="col-sm-4 feature-box highlight">
          <a data-target="#carouselExampleIndicators" data-slide-to="0" class="active carousel-slide">01 This is another article name</a>
        </div>
        <div class="col-sm-4 feature-box">
          <a data-target="#carouselExampleIndicators" data-slide-to="1" class="carousel-slide">02 This is yet another article name to promote it</a>
        </div>
        <div class="col-sm-4 feature-box">
          <a data-target="#carouselExampleIndicators" data-slide-to="2" class="carousel-slide">I am the last of my kind but I too am a article</a>
        </div>
      </div>
    </div>
  </div>
</div>

更新

每次bootsrap旋转木马插件滑动时，都会触发

slide.bs.carousel事件，该事件在其中提供回调事件参数（一个对象），该事件参数包含from和to的数字属性，用于指示来回回调滑动即可过渡。

正如我在答案顶部提到的那样，在您的问题$('.feature-box')中将选择所有具有匹配类feature-box的3个div。您在此上下文（3个div）上调用的任何jquery函数都将在该上下文上执行。因此，如果您调用next()函数，它将尝试查找所有3个选定的DIVS的下一个同级项。

由于根据要求，只有一个feature-box可以拥有highlighted类，因此我们首先将其从所有3个div中删除（即使只有一个div，也可以像上面的代码中那样安全地删除它），然后我们使用$(".feature-box")过滤.eq(to)结果，因此result现在只是一个与当前幻灯片位置相同的div。最后，.addClass("highlighted")将根据过滤结果（单个div）设置该类。

我希望这可以更好地解释该回调中发生的事情。