代码之家 › 专栏 › 技术社区 › user5854648 Kailash Karki

next()正在向所有元素添加类

bootstrap-4 jquery javascript

-1

user5854648 Kailash Karki · 技术社区 · 7 年前

<a> .highlight 但它将它添加到每一个 < 元素。

函数中删除 .亮点 <a>

我已经查阅了jQuery文档,甚至还密切关注了另一个关于StackOverflow的类似问题的回复,但运气不好。

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

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

1 回复 | 直到 7 年前

1

Milan Jaric 7 年前

您要求jquery在所有3.featurebox 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>

slide.bs.carousel 事件在每次bootsrap carousel插件滑动时都会被激发,在该插件中,它向包含 from to 告诉回调从哪个幻灯片转换到哪个幻灯片的数字属性。

正如我在回答的顶部提到的,在你的问题中 $('.feature-box') 将选择所有3个类别匹配的div feature-box . 在此上下文(3个div)上调用的任何jquery函数都将在该上下文上执行。所以如果你打电话 next() 函数,它将尝试查找所有3个选定div的下一个同级。

因为按要求只有一个可以 highlighted 类,我们首先从所有3个div中删除它(即使只有一个div有它,也可以像上面的代码那样安全地删除),然后过滤 $(".feature-box") .eq(to) .addClass("highlighted") 将在筛选结果(单个div)上设置该类。

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