3

jQueryアプリケーションを作成する際に直面している問題に似たフィドルを設計しました。アクションを実行する複数のボタンがあり、アニメーションの終了後に見出しを変更する必要があります。見出しは、押されたボタンによって異なります。コールバックにパラメーターを渡すことができないため、グローバル変数を渡すことにしました。そうするためのより適切な方法はありますか？

http://jsfiddle.net/XDdEV/

var heading = '';

function headingChanger(e) {
    $("#heading").html(heading);
}

$("#one").click(function (e) {
    heading = 'HEADING 1'
    $("#slider").animate({
        'margin-left' : '200px'
    },1000,'linear',headingChanger);
});

$("#two").click(function (e) {
    heading = 'HEADING 2'
    $("#slider").animate({
       'margin-left' : '0'
    },1000,'linear',headingChanger);
});
4

3 に答える 3

3

この関数は次のように呼び出すことができます。

$("#two").click(function (e) {
    heading = 'HEADING 2'
    $("#slider").animate({
       'margin-left' : '0'
    },1000,'linear',function() { headingChanger(heading) });
});

これにより、headingChangerがコールバックで評価されます。

于 2012-07-27T18:31:05.990 に答える
0

それらを組み合わせて、次のようなことができます。

function headingChanger(heading) {
    $("#heading").html(heading);
}

$("#one, #two").click(function (e) {
    var h = e.target.id==='one'?'1':'2';
    $("#slider").animate({
        'margin-left' : h=='1'?'200px':'0'
    },1000,'linear',function() { 
        headingChanger('HEADING '+h); 
    });
});

</p>

フィドル

于 2012-07-27T18:44:12.860 に答える
0

JS は関数スコープ (まあ、IE8 でもサポートされているもの) であるため、すべてのものを素敵な関数にラップし、必要なものをグローバルにエクスポートできます。

(function headingMoverModule(exports){
    var heading = '';

    function headingChanger(e) {
        $("#heading").html(heading);
    }

    $("#one").click(function (e) {
        heading = 'HEADING 1'
        $("#slider").animate({
            'margin-left' : '200px'
        },1000,'linear',headingChanger);
    });

    $("#two").click(function (e) {
        heading = 'HEADING 2'
        $("#slider").animate({
           'margin-left' : '0'
        },1000,'linear',headingChanger);
    });
    exports.headingChanger = headingChanger;
})(window);

モジュールに適用するか、jQuery.proxyなどを使用して、関数を元のパラメーターにバインドしますが、OOP のような処理が役立ちます。

于 2012-07-27T18:35:28.430 に答える