0

私が作ろうとしているのは単純なjqueryウィザードです.4つのステップがあり、前と次のボタンがあります. 次のステップに応じて、次をクリックすると、線が金色で塗りつぶされ、その後も円が塗りつぶされます。したがって、ステップ 2 で次をクリックすると、円 2 から円まで線が塗りつぶされます。 3. などなど…要素ごとに 1 つずつ、5 つの関数でなんとかできましたが、もっと単純な 1 つの関数でできると確信しています。コードは次のとおりです。

$(document).ready(function () {
    $('.next').click(function () {
        if ($('.sirina').parent().prev('.krug').hasClass('stiglo')) {
            console.log(this);
            $('.sirina').animate({
                width: '150px'
            }, 1000, function () {
                $(this).parent().next('.krug').animate({
                    borderTopColor: '#E3B009',
                    borderBottomColor: '#E3B009',
                    borderLeftColor: '#E3B009',
                    borderRightColor: '#E3B009'
                }, 1000).addClass('stiglo');
            });
        }
    });
});

http://jsfiddle.net/Frenki/LbssU/3/

ここで、console.log の後に問題が発生します。ここでは、すべての「.sirina」クラスをアニメーション化していますが、以前の div に関数「if」内の要素であるクラス「stiglo」があるクラスではありません。しかし、「this」を使用すると、if 関数内のクラスではなく、「次の」クラスを参照します。

これがすべて理にかなっていることを願っています:)

4

3 に答える 3

3

このコールバック内のスコープは、animate()が実行される要素を参照します。

        $('.sirina').animate({
            width: '150px'
        }, 1000, function () {
            // $(this) is $('.sirina') element the callback is executed on
            $(this).parent().next('.krug').animate({
                borderTopColor: '#E3B009',
                borderBottomColor: '#E3B009',
                borderLeftColor: '#E3B009',
                borderRightColor: '#E3B009'
            }, 1000).addClass('stiglo');
        });

クリックハンドラー内のスコープは、click()がアタッチされている要素です（この場合は）$('.next')。コールバック内でこのコンテキストを使用するために、クロージャーを使用できanimate()ます。

$(document).ready(function () {
    $('.next').click(function () {
        var self = this;
        if ($('.sirina').parent().prev('.krug').hasClass('stiglo')) {
            console.log(this);
            $('.sirina').animate({
                width: '150px'
            }, 1000, function () {
                // self is $('.next')[0]
                $(self).parent().next('.krug').animate({
                    borderTopColor: '#E3B009',
                    borderBottomColor: '#E3B009',
                    borderLeftColor: '#E3B009',
                    borderRightColor: '#E3B009'
                }, 1000).addClass('stiglo');
            });
        }
    });
});
于 2013-03-07T12:51:52.063 に答える
3

あなたの問題は.sirina、アニメーション化に使用していたことです。これにより、すべての要素がアニメーション化されます。.sirinaここでは、アニメーション化に使用しているため、if 条件には意味がありません。今、私の答え

$(document).ready(function () {
    $('.next').click(function () {
        $('.stiglo').nextAll('.prvi:first').find('.sirina').animate({
                width: '150px'
            }, 1000, function () {

                 $(this).parent().prev('.krug').removeClass('stiglo');

                $(this).parent().next('.krug').animate({
                    borderTopColor: '#E3B009',
                    borderBottomColor: '#E3B009',
                    borderLeftColor: '#E3B009',
                    borderRightColor: '#E3B009'
                }, 1000).addClass('stiglo');
            });

JSFIDDLE

于 2013-03-07T13:11:30.167 に答える
2

要素の現在のインデックスを設定し、見てください

デモビュー

    var current=0;

   $(document).ready(function () {
    $('.next').click(function () {
        if ($('.sirina').parent().prev('.krug').hasClass('stiglo')) {
            console.log(this);
            $('.sirina').eq(current).animate({
                width: '150px'
            }, 1000, function () {
                current++;
                $('.krug').eq(current).animate({
                    borderTopColor: '#E3B009',
                    borderBottomColor: '#E3B009',
                    borderLeftColor: '#E3B009',
                    borderRightColor: '#E3B009'
                }, 1000).addClass('stiglo');
            });
        }
    });
});
于 2013-03-07T12:57:16.333 に答える