如何触发Bootstrap Carousel的旋转木马指示器

Question

我的代码出了什么问题？ 我想触发当前的bootstrap轮播幻灯片编号。 我想在特定幻灯片时更改文本或执行一些jQuery命令。 请看我的代码。

 $(document).ready(function() { $('#myCarousel').on('slide.bs.carousel', function (ev) { var id = ev.relatedTarget.id; switch (id) { case "1": $('#sometext').text("one"); break; case "2": $('#sometext').text("two"); break; case "3": $('#sometext').text("three"); default: //the id is none of the above } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <h1 id="sometext">Some Text here</h1> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> <li data-target="#myCarousel" data-slide-to="3"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="http://www.w3schools.com/bootstrap/img_chania.jpg" alt="Chania" width="460" height="345"> </div> <div class="item"> <img src="http://www.w3schools.com/bootstrap/img_chania2.jpg" alt="Chania" width="460" height="345"> </div> <div class="item"> <img src="http://www.w3schools.com/bootstrap/img_flower.jpg" alt="Flower" width="460" height="345"> </div> <div class="item"> <img src="http://www.w3schools.com/bootstrap/img_flower2.jpg" alt="Flower" width="460" height="345"> </div> </div> <!-- Left and right controls --> <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> 

Answer 1

尝试

$(document).ready(function() {    
   $('#myCarousel').on('slide.bs.carousel', function (ev) {
       var idx = $(ev.relatedTarget).index() + 1;
       console.log(idx);
   });
})

Answer 2

感谢tmg代码，为正在寻找准备代码的人提供了正确的html代码。

$(document).ready(function() {
       $('#myCarousel').on('slide.bs.carousel', function (ev) {
       var idx = $(ev.relatedTarget).index() + 1;
/*       console.log(idx);*/
       idx = parseInt(idx);
        switch (idx) {
          case 1:
            $('#sometext').text("one");
            break;
          case 2:
            $('#sometext').text("two");
            break;
          case 3:
            $('#sometext').text("three");
          default:
            //the id is none of the above
            $('#sometext').text("default");
        }
      });
    });