Twitter bootstrap 推特引导：显示模式上的滑动旋转木马

我有一个模式，包含一个带2张幻灯片的旋转木马，带有登录和注册表单

我希望实现以下目标：

• 当用户单击站点标题中的“登录”链接时，模式应打开 旋转木马应该滑到“登录”幻灯片（它位于 0）
• 当用户单击站点标题中的“注册”链接时，模式应为 打开，旋转木马应滑至“注册”幻灯片（位于 索引（1）
• 每当幻灯片转换发生时，模式标题文本 已更改（绑定到转盘的“滑动”事件）

然而，我看不出这能起作用。我认为问题在于所有这些事件发生的顺序

以下是基本代码：

// Initialize modal
$('.modal').modal()

// Initialize carousel
$('.carousel').carousel()
$('.carousel').carousel('pause') // Pause the carousel so it doesn't auto-rotate

$('.signuplink').on('click', function() {
    $('.carousel').carousel(1).on('slid', function() {
        $('.modal .modal-title').html('Sign Up');
        $('.modal').modal('show');
    });
});

但它不起作用。如果事先未显示模式，则不会发生“滑动”事件。因此，我尝试显示模式，然后滑动旋转木马，绑定到模式的“显示”事件，但是虽然它确实滑动到下一张幻灯片，但“滑动”事件没有发生。 更奇怪的是，模式上的“关闭”按钮不再起作用，就像所有事件处理都一团糟一样

---

编辑：第一次显示模式时，似乎没有触发“显示”事件。它只有在我隐藏模态时才会激发。当我再次打开它时，“显示”似乎在正确的时刻被触发

首先，嵌套太多了

您几乎不应该在

单击
事件或任何事件中嵌套事件绑定，因为每次单击都会添加另一个侦听器

这是一个解决办法

var$myModal=$（'#myModal'）.modal（{show:false}）；
var$myCarousel=$（'#myCarousel'）.carousel（{'interval'：false}）；
$（'.btn'）。每个（函数（）{
var$this=$（this）；
var索引=$（this）.date（'slide-index'）；
$this。单击（函数（）{
$myModal.modal（'show'）；
$myCarousel.carousel（索引）；
});
});

0
1.
×
标题0
0

×
标题1
一,



但是，如果您激活滑动效果，仍然会有一个错误：在几次滑动之后，
Carousel
对象保持
slideing:true
，从而阻止未来的滑动；欢迎改进。
首先，嵌套太多了

您几乎不应该在
单击
事件或任何事件中嵌套事件绑定，因为每次单击都会添加另一个侦听器

这是一个解决办法

var$myModal=$（'#myModal'）.modal（{show:false}）；
var$myCarousel=$（'#myCarousel'）.carousel（{'interval'：false}）；
$（'.btn'）。每个（函数（）{
var$this=$（this）；
var索引=$（this）.date（'slide-index'）；
$this。单击（函数（）{
$myModal.modal（'show'）；
$myCarousel.carousel（索引）；
});
});

0
1.
×
标题0
0

×
标题1
一,



但是，如果您激活滑动效果，仍然会有一个错误：在几次滑动之后，
Carousel
对象保持
slideing:true
，从而阻止未来的滑动；欢迎改进。
旋转木马的索引对我来说无法正常工作，因此我使用了如下所示的方法

var $myModal = $('#myModal').modal({show: false});
var $myCarousel = $('#myCarousel').carousel({'interval': false});

$('.btn').click(function() {
    $myModal.modal('show');
    $myCarousel.carousel($(this).index('.btn'));
});

旋转木马的索引对我来说不正常，所以我使用如下所示

var $myModal = $('#myModal').modal({show: false});
var $myCarousel = $('#myCarousel').carousel({'interval': false});

$('.btn').click(function() {
    $myModal.modal('show');
    $myCarousel.carousel($(this).index('.btn'));
});

虽然这并不完全是我所需要的（我需要将modal header保持在旋转木马之外），但它让我找到了正确的方向。谢谢虽然这并不完全是我所需要的（我需要将modal header保持在旋转木马之外），但它让我找到了正确的方向。谢谢