Question

我设计了一个类似于我在制作jQuery应用程序时遇到的问题的小提琴。我有多个执行动作的按钮，必须在动画结束后更改标题。标题取决于按下的按钮。由于您无法将参数传递给回调，因此我尝试传递全局变量。有没有更合适的方法呢？

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);
});

Answer 1

您可以将该功能称为：

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

这将使headingChanger在回调时得到评估。

Answer 2

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);

一些类似OOP的处理有助于，尽管将其应用于模块，或将函数绑定到其原始参数，例如， jQuery.proxy

Answer 3

您可以将它们组合起来并执行以下操作：

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); 
    });
});

FIDDLE

将参数传递给动画回调jQuery？

3 个答案: