javascript - 如何删除或隐藏 bootstrap 3 slider 的分页？

Question

如果幻灯片小于或等于 1 - 隐藏 bootstrap 3 轮播的分页

现在所有 slider 的分页都隐藏了，但只有第二个 slider (1项)

我尝试这样解决这个任务，但是这段代码不起作用

我的代码 - Fiddle

function carouselHideIndicators() {

  $('.carousel').each(function() {

    var carouselItems = $('.carousel-inner item');

    if (carouselItems.length <= 1) {
      $('.carousel-indicators').hide();
    } else {
      $('.carousel-indicators').show();
    }
  });

}
$(function() {
  carouselHideIndicators();
});

.carousel {
  border: 1px solid #f00;
  margin-bottom: 25px;
}
img {  
  width: 50%;
  margin: 0 auto;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<!-- slider 1 -->
<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel" data-interval="false">
  <div class="carousel-inner">
    <div class="item active">
      <img src="http://via.placeholder.com/250x250?text=Slider-Main-1" alt="">
    </div>
    <div class="item">
      <img src="http://via.placeholder.com/250x250?text=Slider-Main-1" alt="">
    </div>
    <div class="item">
      <img src="http://via.placeholder.com/250x250?text=Slider-Main-1" alt="">
    </div>
  </div>
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"><img src="http://via.placeholder.com/150x150?text=1" alt=""></li>
    <li data-target="#myCarousel" data-slide-to="1">
      <img src="http://via.placeholder.com/150x150?text=2" alt="">
    </li>
  </ol>
</div>

<!-- slider 2 -->
<div id="myCarousel2" class="carousel slide carousel-fade" data-ride="carousel" data-interval="false">
  <div class="carousel-inner">
    <div class="item active">
      <img src="http://via.placeholder.com/250x250?text=Slider-Main-2" alt="">
    </div>
  </div>
  <ol class="carousel-indicators">
    <li data-target="#myCarousel2" data-slide-to="0" class="active"><img src="http://via.placeholder.com/150x150?text=1" alt=""></li>
  </ol>
</div>

谢谢。

我很乐意提供任何帮助

Answer 1

问题是您正在通过查询恢复全局对象。 我的意思是，您使用以下句子遍历 .carousel 元素:

$('.carousel').each(function() {

然后，在你要找的函数里面

var carouselItems = $('.carousel-inner item');

这是在整个文档中查找与该模式匹配的所有元素，而不是在迭代中，因此您必须查看当前迭代子项中的元素以获取元素。

要做到这一点，请使用 $(this).children() 来访问当前迭代元素的子元素。在这种情况下，获取当前 .carousel 中的 .carousel-inner 元素，然后获取 .item 元素。

    var carouselItems = $(this).children('.carousel-inner').children('.item');

显示/隐藏元素时也必须这样做，因为您只想修改当前迭代，因此:

if (carouselItems.length <= 1) {
  $(this).children('.carousel-indicators').hide();
} else {      
  $(this).children('.carousel-indicators').show();
}

我用以下更改更新了 fiddle : https://jsfiddle.net/6oyeaut4/11/

希望对您有所帮助!可能 .children() 链接可以用过滤器替换