0

いくつかのイテレータに凝縮したいこの関数があります。この関数をどのようにクリーンアップできますか？

次のように、すべてを順番に実行する必要があります。1つの関数が戻ると、次の関数が開始されます。すべての奇数の子はフェードイン後にフェードアウトする必要があり、すべての偶数の子はフェードインした後にフェードアウトしないようにする必要があります。

このコードはCoffeeScriptに含まれているため、セミコロンはありません。

また、8番目の子の後で問題が発生します（たとえば、'.title-sword：nth-​​child（9）を続行すると、関数が機能しなくなります）。埋め込まれた関数の深さには限界があると思いますが、これを確認することはできません。

$('.title-sword:nth-child(2)').css('visibility', 'visible').hide().fadeIn('fast').fadeOut('fast', ->
    $('.title-sword:nth-child(3)').css('visibility', 'visible').hide().fadeIn('fast', ->
        $('.title-sword:nth-child(4)').css('visibility', 'visible').hide().fadeIn('fast').fadeOut('fast', ->
            $('.title-sword:nth-child(5)').css('visibility', 'visible').hide().fadeIn('fast', ->
                $('.title-sword:nth-child(6)').css('visibility', 'visible').hide().fadeIn('fast').fadeOut('fast', ->
                    $('.title-sword:nth-child(7)').css('visibility', 'visible').hide().fadeIn('fast', ->
                        $('.title-sword:nth-child(8)').css('visibility', 'visible').hide().fadeIn('fast').fadeOut('fast')
                    )
                )
            ) 
        )
    )
)
4

4 に答える 4

1

次のようなものを試してください（私は通常のJSの人なので、CoffeeScriptは使用しません）。

(function() {
    var i=2, elm,
        step = function() {
            elm = $('.title-sword:nth-child('+i+')');
            if( !elm) return;
            elm.css('visibility','visible').hide();
            if( i%2 == 0) elm.fadeIn('fast').fadeOut('fast',step);
            else elm.fadeIn('fast',step);
            i++;
        };
    step();
})();

このコードは、2番目の子から開始し、子がなくなるまで繰り返して目的の関数を実行します。

于 2012-06-17T21:44:14.817 に答える
0

セレクター操作を1回だけ実行してから、その結果を繰り返すことを好みます。これがあなたの目的のために使われることができる一般的な関数です：

fadeInOutChildren(parentSelector, lowChild, highChild) {
    var items = $(parentSelector).children();
    var index = lowChild;

    function next() {
        if (index <= highChild) {
            items.eq(index++).css('visibility', 'visible').hide().fadeIn('fast').fadeOut('fast', next);
        }
    }
    next();
}

fadeInOutChildren(".title-sword", 1, 7);
于 2012-06-17T22:20:18.140 に答える
0

これを試して：

$('.title-sword:nth-child(n+2):not(:nth-child(n+9))').css('visibility', 'visible').hide().fadeIn('fast').fadeOut('fast')

http://jsfiddle.net/RfHj2/1/

于 2012-06-17T21:42:37.800 に答える
0

要素がすべて兄弟であると仮定すると、これは機能するはずです。

function doFades($el){
    $el.css('visibility', 'visible').hide().fadeIn('fast').fadeOut('fast', function(){
            var $next=$(this).next();
            if($next.length){
                doFades( $next);
            }
    }); 
}

doFades( $('.title-sword:nth-child(2)') );

私はcoffeescriptの構文に精通していませんが、簡単に変更できるはずです

于 2012-06-17T21:45:20.403 に答える