0

カルーセルを作成しています (そこにプラグインがあることは知っていますが、独自のプラグインを作成したい)。コードを再度実行するには、true または false の値を返す必要があるため、このコードを関数内に配置するのに苦労しています。これまでのところ、繰り返されるこのコードがあります:

if(!active) {
        active = true;
        $('#box ul').animate({ 'left': left_indent }, 500, function () {
            $('#box li:last').after($('#box li:first'));
            $('#box ul').css({ 'left': left_value });
            active = false;
        });
    }

私はそれを次のような関数に入れてみました:

function slider(left_indent, left_value) {
$('#box ul').animate({'left' : left_indent}, 500,function(){   

    $('#box li:first').before($('#box li:last'));          
    $('#box ul').css({'left' : left_value});

    var active = false;
});

}

そして、私は次のように呼び出してみました:

if(!active) {
        active = true;
        slider(left_indent, left_value);
    }

その関数を呼び出すたびに、アクティブになってfalseを返すことができないようです。何が欠けているのかわかりません。

これはこれまでのすべての私のコードです:

$(function () {
var item_width = $("#box li img").outerWidth();
var left_value = item_width * (-1);

$('#box li:first').before($('#box li:last'));
$('#box ul').css({ 'left': left_value });

var active = false;
$("#next").click(function () {
    var left_indent = parseInt($('#box ul').css('left')) - item_width;

    if(!active) {
        active = true;
        $('#box ul').animate({ 'left': left_indent }, 500, function () {
            $('#box li:last').after($('#box li:first'));
            $('#box ul').css({ 'left': left_value });
            active = false;
        });
    }
    return false;
});

$("#back").click(function () {
    var left_indent = parseInt($('#box ul').css('left')) + item_width;

    if(!active) {
        active = true;
        slider(left_indent, left_value);
    }
    return false;
});

});

function slider(left_indent, left_value) { $('#box ul').animate({'left' : left_indent}, 500,function(){ 

    $('#box li:first').before($('#box li:last'));          
    $('#box ul').css({'left' : left_value});

    var active = false;
});

}

どんなアドバイスも素晴らしいでしょう。前もって感謝します

4

3 に答える 3

0

このような便利な方法でコールバックから関数を実際に返すことはできません。コールバックがそれを変更する前に、外側の関数がアクティブに戻るためです。また、「var」でアクティブを再定義/再スコープしたため、とにかく外側のアクティブを変更することはありません。必要なのは、共有スコープでアクティブにして、クリック ハンドラーでテストを行うことです。

何かのようなもの：

var active = false;

//assumes left_indent, left_value defined further up
$('#slideRightBtn').click(function(){
    if(!active){ slider(left_indent,left_value)); }
});

function slider(left_indent, left_value) {

    //Don't use 'var' for active here
    //that sets a new var 'active' in the scope of this func

    active = true;
    $('#box ul').animate({'left' : left_indent}, 500,function(){   

        $('#box li:first').before($('#box li:last'));          
        $('#box ul').css({'left' : left_value});


        active = false;
    });
}
于 2012-07-07T16:19:05.983 に答える
0

var外側のスコープまたはグローバル スコープ内の変数を変更する場合は、関数内の最後のコード行から削除するだけで済みます。

function slider(left_indent, left_value) {
$('#box ul').animate({'left' : left_indent}, 500,function(){   

    $('#box li:first').before($('#box li:last'));          
    $('#box ul').css({'left' : left_value});

    active = false; // Changed!
});

注: ...しかし、これを行わないでください。これを行うことができるという事実-変数の値にアクセスするだけでなく、外側のスコープで変数を変更することは、Javascriptの「悪いこと」です-たとえば、Pythonのような「まともな」言語では、これを行うことはできません! LiveScriptのような一部の Javascript の「置換」では、これが不可能になります (実際には、特別な構文を使用する必要があります)。しかし、残念ながら、より人気のある CoffeeScript はそうではありません:(もっと複雑なもの。

于 2012-07-07T16:25:50.490 に答える
0

アクティブは同じスコープにありませんでした。作業例を参照してくださいhttp://jsfiddle.net/AvzvJ/7/

ただし、これにアクティブのようなセマフォを使用するのは悪いスタイルです。

于 2012-07-07T16:27:34.247 に答える