為什么不能調用數組中存儲的jQuery方法？

Question

這些按鈕應該在圖像上執行show ， hide ， toggle等功能，但是它們無法正常工作。 有人告訴我，我正在破壞show ， hide等函數中this的引用。 我該如何解決？

 /// <reference path="jquery-3.3.1.js" /> var functionArray = [$('img').show, $('img').hide, $('img').toggle, $('img').fadeIn, $('img').fadeOut, $('img').fadeToggle]; var buttonArray = [$('.show'), $('.hide'), $('.toggle'), $('.fadein'), $('.fadeout'), $('.fadetog')] var counter = 0 while (counter < buttonArray.length) { executer(counter) counter++ } function executer(counter) { buttonArray[counter].click(function() { functionArray[counter](); }) } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img src="https://placehold.it/300x50" /> <br /> <button class="show">Show</button> <button class="hide">Hide</button> <button class="toggle">Toggle</button> <button class="fadein">Fade in</button> <button class="fadeout">Fade out</button> <button class="fadetog">Fade toggle</button> <!-- Script sources in the original code: <script src="Scripts/jquery-3.3.1.js"></script> <script src="Scripts/Script1.js"></script> --> 

Answer 1

沒錯，當您將方法與對象分開存儲時，上下文會丟失。

由於上下文對象對於所有方法都是相同的，因此解決此問題的最簡單方法是根本不存儲上下文對象，而僅存儲方法名稱。

然后， functionArray僅包含方法名稱作為字符串； 然后可以通過$("img")[functionArray[counter]]();訪問和調用它們$("img")[functionArray[counter]](); 。

擴展此代碼片段以查看正在運行的代碼：

 var functionArray = [ "show", "hide", "toggle", "fadeIn", "fadeOut", "fadeToggle" ], buttonArray = [ $('.show'), $('.hide'), $('.toggle'), $('.fadein'), $('.fadeout'), $('.fadetog') ], counter = 0; while (counter < buttonArray.length) { executer(counter); counter++; } function executer(counter) { buttonArray[counter].click(function() { $("img")[functionArray[counter]](); }) } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img src="https://placehold.it/300x50" /> <br /> <button class="show">Show</button> <button class="hide">Hide</button> <button class="toggle">Toggle</button> <button class="fadein">Fade in</button> <button class="fadeout">Fade out</button> <button class="fadetog">Fade toggle</button>