Question

我有一个包含旋转木马的模态，其中包含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');
    });
});

但它不起作用。当模态未事先显示时，“滑动”事件永远不会发生。所以我试图显示模态，然后滑动旋转木马，绑定到模态的“显示”事件，但是当它滑动到下一张幻灯片时，“滑动”事件不会发生。更奇怪的是，模态上的关闭按钮不再起作用，就像所有事件处理都搞砸一样......

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

Answer 1

首先，嵌套太多了。

你应该几乎永远不会在click事件或任何事件中嵌套事件绑定，因为每次点击都会添加另一个监听器。

这是一个解决方案。

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

$('.btn').each(function() {
    var $this = $(this);
    var index = $(this).date('slide-index');
    $this.click(function() {
        $myModal.modal('show');
        $myCarousel.carousel(index);
    });
});

<button class="btn" data-slide-index="0">0</button>
<button class="btn" data-slide-index="1">1</button>

<div id="myModal" class="modal fade">
    <div id="myCarousel" class="carousel">
        <div class="carousel-inner">
            <div class="active item">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">×</button>
                    <h3>Title 0</h3>
                </div>
                <div class="modal-body">
                    <p>0</p>
                </div>
            </div>
            <div class="item">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">×</button>
                    <h3>Title 1</h3>
                </div>
                <div class="modal-body">
                    <p>1</p>
                </div>
            </div>
        </div>
        <!-- Carousel nav -->
        <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
    </div>
</div>

Live Demo (jsfiddle)

但是如果你激活滑动效果仍然存在一个错误：Carousel对象在一些滑动后保持sliding: true - 从而阻止未来的滑动;改善欢迎。

Answer 2

旋转木马的索引对我来说没有正常工作，所以我使用如下所示。

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

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

Twitter bootstrap：在显示的模态上滑动轮播

2 个答案: