Bootstrap 3:关闭模式后在模式窗口中禁用旋转木马
我在一个模态窗口中有一个旋转木马。单击缩略图图像时，将弹出一个模式，并显示相应的carousel项，从而触发整个carousel。我的问题是，一旦模式窗口关闭，旋转木马仍在继续，循环通过所有图像。如果再次单击缩略图，则会显示模式，但会显示两个堆叠在一起的图像。我理解为什么会发生这种情况，当一个缩略图被点击时，我会动态地添加“active”类，所以第二次启动转盘时，两个图像都有“active”类。
我想知道是否有办法完全停用旋转木马。如果我试图删除"active“类，javascript会从Bootstrap carousel函数抛出一个错误，"Cannot read property 'slice‘of undefined”。我尝试使用"interval: false“调用carousel函数，但是没有用。
下面是我用来调用code和carousel的代码：
$("#info a").click(function(){
var thumb = $(this).data('id'); //Get the ID of the thumbnail clicked
//add class "active" to the corresponding carousel item
$('#infoCarousel div[class*="item"]').each(function(i){
if(i == thumb){
$(this).addClass('active');
}
});
$("#carouselModal").modal('show');//Show the modal window
//Start the carousel with the proper item
$("#carouselModal").on('show.bs.modal', function(e){
$('#infoCarousel').carousel({
number: thumb
});
});
});下面是我在关闭模式后所做的尝试：
//Once the modal window is closed, remove the "active" class from the last showing item (to prevent double image showing if carousel is fired up right away a second time)
$('#carouselModal').on('hidden.bs.modal', function(){
$('#infoCarousel').carousel({
interval: false
});
$('#infoCarousel div[class*="active"]').each(function(i){
$(this).removeClass('active');
});
});如前所述，删除'active‘类将抛出一个错误*(阻止carousel的正常行为)，并使用"interval: false“再次调用carousel不做任何事情。你可以在动作here中看到它，只需点击信息，然后点击缩略图，然后关闭模式并再次点击缩略图。任何关于如何解决这个问题的提示都将不胜感激。谢谢。
回答 1
Stack Overflow用户
发布于 2014-08-03 00:48:41
没有什么比睡个好觉更能解决问题并找到解决方案的了。我的问题是由于我在carousel的开场DIV中留下的这个数据声明引起的，data-ride="carousel"这会导致carousel在页面加载时启动。一旦这段代码被取出，我的代码就可以按预期运行了。这就是你在复制/粘贴代码时得到的结果，而不是为你的特定应用程序彻底检查它。我对此感到内疚的次数比我愿意承认的还要多。希望这能帮助其他“复制/粘贴”人员仔细检查他们粘贴到应用程序中的代码。干杯!
https://stackoverflow.com/questions/25089819
复制相似问题
腾讯云开发者
