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 に答える