这是bootstrap轮播的示例版本......
我想从调用幻灯片的指标中获取该项目......
我在指标中添加了一个新的数据值,但是如何抓住slid.bs.carousel?
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-value="A" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-value="B" data-slide-to="1"></li>
<li data-target="#myCarousel" data-value="C" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="la.jpg" alt="Chania">
<div class="carousel-caption">
<h3>Los Angeles</h3>
<p>LA is always so much fun!</p>
</div>
</div>
<div class="item">
<img src="chicago.jpg" alt="Chicago">
<div class="carousel-caption">
<h3>Chicago</h3>
<p>Thank you, Chicago!</p>
</div>
</div>
<div class="item">
<img src="ny.jpg" alt="New York">
<div class="carousel-caption">
<h3>New York</h3>
<p>We love the Big Apple!</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
这里...
<script>
$('#myCarousel').on('slid.bs.carousel', function (e) {
alert(?? data-value ??);
})
</script>
答案 0 :(得分:1)
您可以在 slid.bs.carousel 事件处理程序中选择活动 li 来获取指标值:
$('#myCarousel .carousel-indicators li.active')
$('#myCarousel').on('slid.bs.carousel', function (e) {
var ele = $('#myCarousel .carousel-indicators li.active');
console.log('target: ' + ele.data('target') +
' value: ' + ele.data('value') +
' slide-to: ' + ele.data('slideTo'));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-value="A" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-value="B" data-slide-to="1"></li>
<li data-target="#myCarousel" data-value="C" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://dummyimage.com/200x200/000/fff&text=1" alt="Chania">
<div class="carousel-caption">
<h3>Los Angeles</h3>
<p>LA is always so much fun!</p>
</div>
</div>
<div class="item">
<img src="https://dummyimage.com/200x200/000/fff&text=2" alt="Chicago">
<div class="carousel-caption">
<h3>Chicago</h3>
<p>Thank you, Chicago!</p>
</div>
</div>
<div class="item">
<img src="https://dummyimage.com/200x200/000/fff&text=3" alt="New York">
<div class="carousel-caption">
<h3>New York</h3>
<p>We love the Big Apple!</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>