1

我有一个模式，其中包含一个带有 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');
    });
});

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

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

4

2 回答 2

3

首先，嵌套太多。

您几乎不应该在事件或任何事件中嵌套事件绑定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>

现场演示（jsfiddle）

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

于 2012-06-30T18:38:21.943 回答
1

轮播的索引对我来说不能正常工作，所以我使用如下所示。

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

$('.btn').click(function() {
    $myModal.modal('show');
    $myCarousel.carousel($(this).index('.btn'));
});
于 2013-07-17T04:48:15.227 回答