将参数传递给动画回调jQuery

Passing paremeters to animation callback jQuery?

本文关键字：回调 jQuery 动画 参数传递      更新时间：2024-05-03

我设计了一个类似于我在制作jQuery应用程序时面临的问题的fiddle。我有多个按钮执行一个动作，必须在动画完成后更改标题。标题取决于按下的按钮。由于不能将参数传递给回调，所以我采用了传递全局变量的方法。有更合适的方法吗？

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

您可以将函数调用为：

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

这将使headingChanger在回调时进行评估。

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

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

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

相关文章：