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

一些类似 OOP 的处理会有所帮助，尽管可以将其应用于模块，或者将函数绑定到它们的原始参数，例如使用jQuery.proxy

于 2012-07-27T18:35:28.430 回答