將paremeters傳遞給動畫回調jQuery？

我設計了一個類似於我在製作jQuery應用程序時遇到的問題的小提琴。我有多個執行動作的按鈕，並且必須在動畫完成後更改標題。標題取決於按下了哪個按鈕。由於您無法將參數傳遞給回調函數，因此我採取了傳遞全局變量的方法。有沒有更合適的方法來做到這一點？將paremeters傳遞給動畫回調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); 
});

來源

2012-07-27 user974896

你可以調用該函數爲：

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

這將使headingChanger可以在回調評估。

來源

2012-07-27 18:31:05 jholloman

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-27 18:35:28 Aadaam

你可以將它們結合起來，做一些事情，如：

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

來源

2012-07-27 18:44:12 adeneo

將paremeters傳遞給動畫回調jQuery？

回答

相關問題