Question

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

现在隐藏了所有滑块的分页，但只隐藏了第二个滑块（1个项目）

我尝试解决此任务，但此代码无法正常工作

我的代码 - Fiddle

＆＃13;

function carouselHideIndicators() {

  $('.carousel').each(function() {

    var carouselItems = $('.carousel-inner item');

    if (carouselItems.length <= 1) {
      $('.carousel-indicators').hide();
    } else {
      $('.carousel-indicators').show();
    }
  });

}
$(function() {
  carouselHideIndicators();
});

＆＃13;

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

＆＃13;

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

＆＃13;

谢谢。

我很乐意提供任何帮助

Answer 1

问题是您正在通过查询恢复全局对象。我的意思是，您使用以下句子迭代.carousel项目：

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

然后，在您正在寻找的功能中

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

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

为此，使用$（this）.children（）来访问当前迭代元素的子元素。在这种情况下，将.carousel-inner元素放在当前的.carousel中，然后放入.item元素。

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

显示/隐藏元素时必须这样做，因为你只想修改当前的迭代，所以：

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

我更新了小提琴： https://jsfiddle.net/6oyeaut4/11/

希望它有所帮助！也许.children（）链接可以用过滤器替换

如何删除或隐藏bootstrap 3滑块的分页？

1 个答案: