Question

我试图在this one上了解bootstrap旋转木马。但是，当我试图模拟一个。但它不能作为它的演示工作。当用户点击另一个<li>时，活动项目无法更改。我试过但还是没弄明白为什么。这是我的HTML：

<div class="container">
  <div id="myCarousel" class="carousel slide" data-ride="carousel">

    <ul class="nav nav-pills nav-justified">
      <li data-target="#myCarousel" data-slide-to="0" class="active"><a href="#">About<small>Lorem ipsum dolor sit</small></a></li>
      <li data-target="#myCarousel" data-slide-to="1"><a href="#">Projects<small>Lorem ipsum dolor sit</small></a></li>
      <li data-target="#myCarousel" data-slide-to="2"><a href="#">Portfolio<small>Lorem ipsum dolor sit</small></a></li>
    </ul>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <div class="item active">
        <img src="http://placehold.it/1200x400/cccccc/ffffff" />
      </div>
      <!-- End Item -->

      <div class="item">
        <img src="http://placehold.it/1200x400/999999/cccccc">
      </div>
      <!-- End Item -->

      <div class="item">
        <img src="http://placehold.it/1200x400/dddddd/333333">
      </div>
      <!-- End Item -->
    </div>
    <!-- End Carousel Inner -->

  </div>
</div>

我的JS：

$(document).ready(function() {
  $('#myCarousel').carousel({
    interval: 4000
  });
  $('#myCarousel.nav a').on('click', function() {
    clickEvent = true;
    $('.nav li').removeClass('active');
    $(this).parent().addClass('active');
  });
});

有人可以告诉我出了什么问题吗？我仍然是这个jquery的新手。在他的演示中，他为什么这样使用：

$('#myCarousel').on('click', '.nav a', function() {...});

我认为我们只能使用：

$('#myCarousel').on('click',function(){...});

这是我从Jquery click()

学到的东西

这是我的source

Answer 1

您好我尝试了相同的js并创建了 Fiddle 它对我来说很好用

请检查此信息并告知我们。

$(document).ready( function() {
    $('#myCarousel').carousel({
   interval:   4000
    });

    var clickEvent = false;
    $('#myCarousel').on('click', '.nav a', function() {
            clickEvent = true;
            $('.nav li').removeClass('active');
            $(this).parent().addClass('active');        
    }).on('slid.bs.carousel', function(e) {
        if(!clickEvent) {
            var count = $('.nav').children().length -1;
            var current = $('.nav li.active');
            current.removeClass('active').next().addClass('active');
            var id = parseInt(current.data('slide-to'));
            if(count == id) {
                $('.nav li').first().addClass('active');    
            }
        }
        clickEvent = false;
    });
});

Answer 2

您正在尝试使用类.nav定位具有#myCarousel的元素，但您的类在该ID下。因此，为了定位锚标记，您必须通过在选择器之间放置空格来告诉#myCarousel去查找具有类.nav的子项。

Fiddle

更改此

  $('#myCarousel.nav a')

到

 $('#myCarousel .nav a')

有关选择的问题，请查看此问题link

Bootstrap Carousel的活动项目问题

2 个答案: