jQuery .next () добавляет класс ко всем элементам

Question

У меня есть Карусель Bootstrap 4, и я пытаюсь добавить класс к элементам <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 div .feature-box.Вместо этого рассмотрим ниже код

$("#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>

UPDATE

slide.bs.carousel Событие запускается каждый раз при загрузке слайдов плагина начальной загрузки карусели, где оно предоставляет аргумент события обратного вызова (объект), который содержит from и to числовые атрибуты, сообщающие обратный вызов, и на который слайд перешел.

Как я уже упоминал в начале ответа, в вашем вопросе $('.feature-box') выберет все 3 элемента divс подобранным классом feature-box.Любая функция jquery, которую вы вызываете в этом контексте (3 деления), будет выполняться в этом контексте.Поэтому, если вы вызовете функцию next(), она попытается найти следующего брата для ВСЕХ 3 ВЫБРАННЫХ DIVS.

Поскольку по требованиям только один feature-box может иметь класс highlighted, мы сначала удаляем его из всех 3-х элементов.(даже если он есть только у одного, это безопасно делать, как в коде выше), тогда мы фильтруем $(".feature-box") результат с .eq(to), поэтому результат теперь представляет собой только div, который находится в той же позиции, что и текущий слайд.И, наконец, .addClass("highlighted") установит этот класс на отфильтрованный результат (один div).

Надеюсь, это лучше объясняет, что происходит в этом обратном вызове.