jQuery 一个页面上有多个 bootstrap carousels，只能控制一个
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27047717/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Multiple bootstrap carousels on one page, can only control one
提问by Jay
I have a dynamic amount of carousels loaded at once in a view, but I can only scroll through the first carousel rendered. How can I control all of the ones loaded? Only one carousel is able to be viewed at once, the others are hidden.
我在视图中一次加载了动态数量的轮播，但我只能滚动浏览呈现的第一个轮播。我怎样才能控制所有加载的？一次只能查看一个旋转木马，其他旋转木马是隐藏的。
$('#myCarousel').carousel({
interval: 10000
})
$('.carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
});
Html:
网址：
<div class="draft posts" id="draft_1"><div class='container'>
<div class='col-md-12'>
<div class='carousel slide' id='myCarousel'>
<div class='carousel-inner'>
<div class='item active'>
<div class='col-lg-6 col-xs-6 col-md-6 col-sm-6'>
<div id='border'>
<a href='#'></a>
<div class='text-center'>
Revised
</div>
<div class='view-draft-title'>
<h2>I'm editing htis draft</h2>
<p contenteditable="true"> </p>
</div>
<div class='view-draft-body'>
<h2>I'm editing htis draft</h2>
<p contenteditable="true"> </p>
</div>
</div>
</div>
</div>
<div class='item'>
<div class='col-lg-6 col-xs-6 col-md-6 col-sm-6'>
<div id='border'>
<a href='#'></a>
<div class='text-center'>
Original
</div>
<div class='view-draft-title'>
<h1>This is Tsteting new draft</h1>
</div>
<div class='view-draft-body'>
<h2>Click to W<span style="color: rgb(51, 51, 51); font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Geneva, Verdana, sans-serif; font-size: 14px; line-height: 25px;">$('#post-body textarea').val(content) </span><span style="line-height: 1.1;"> editing</span></h2>
</div>
</div>
</div>
</div>
</div>
</div>
<a class='left carousel-control' data-slide='prev' href='draft_1 #myCarousel'>
<i class='glyphicon glyphicon-chevron-left'></i>
</a>
<a class='right carousel-control' data-slide='next' href='draft_1 #myCarousel'>
<i class='glyphicon glyphicon-chevron-right'></i>
</a>
</div>
</div>
</div>
<div class="draft posts" id="draft_2"><div class='container'>
<div class='col-md-12'>
<div class='carousel slide' id='myCarousel'>
<div class='carousel-inner'>
<div class='item active'>
<div class='col-lg-6 col-xs-6 col-md-6 col-sm-6'>
<div id='border'>
<a href='#'></a>
<div class='text-center'>
Revised
</div>
<div class='view-draft-title'>
<h2>Draft 2 After edit</h2>
</div>
<div class='view-draft-body'>
<h2>Draft 2 After edit</h2>
</div>
</div>
</div>
</div>
<div class='item'>
<div class='col-lg-6 col-xs-6 col-md-6 col-sm-6'>
<div id='border'>
<a href='#'></a>
<div class='text-center'>
Original
</div>
<div class='view-draft-title'>
<h1>Number 2</h1>
</div>
<div class='view-draft-body'>
<h2>Draft 2 before edit</h2>
</div>
</div>
</div>
</div>
</div>
</div>
<a class='left carousel-control' data-slide='prev' href='draft_2 #myCarousel'>
<i class='glyphicon glyphicon-chevron-left'></i>
</a>
<a class='right carousel-control' data-slide='next' href='draft_2 #myCarousel'>
<i class='glyphicon glyphicon-chevron-right'></i>
回答by Cassie
You have two carousels with id #myCarousel.
您有两个 ID 为 #myCarousel 的轮播。
One of these should be changed to a different id (#carousel2, for instance). Then the associated controls should be updated to have href="#carousel2"
其中之一应更改为不同的 id（例如，#carousel2）。然后应该更新关联的控件以具有 href="#carousel2"
In general, you should only ever use an ID once per page.
通常，您应该每页只使用一次 ID。
