如何在 JavaScript 中將函數用作變量？

Question

我希望能夠將代碼放在一個地方並從幾個不同的事件中調用它。

目前我有一個選擇器和一個事件：

$("input[type='checkbox']").on('click', function () {
  // code works here //
});

我在文件的其他地方使用了相同的代碼，但使用了不同的選擇器。

$(".product_table").on('change', '.edit_quantity', function () {
  // code works here //
});

我已經嘗試按照 StackOverflow 上其他地方給出的建議，簡單地給我的函數一個名字，然后調用命名的函數，但這對我不起作用。 代碼根本無法運行。

$(".product_table").on('change', '.edit_quantity', function () {
  calculateTotals() {
    // code does not work //
  }
});

因此，我嘗試將代碼放入與事件分開的自己的函數中，並在事件內部調用它，但這對我也不起作用。

calculateTotals() {
  // code does not work //
}

那么我做錯了什么？

Answer 1

您可以將函數作為變量傳遞。

你想在 DOM 加載后為事件添加監聽器， JQuery幫助$(document).ready(fn); （參考）。

要修復您的代碼：

 $(document).ready(function() {
   $("input[type='checkbox']").on('click', calculateTotalsEvent)
   $(".product_table").on('change', '.edit_quantity', calculateTotalsEvent)
 });

 function calculateTotalsEvent(evt) {
   //do something 
   alert('fired');
 }

---

更新：
文斯問道：

這對我有用 - 謝謝你，但是有一個問題：你說，“將你的函數作為變量傳遞”......我不知道你在哪里這樣做。 你可以解釋嗎 ？ tks。 –文斯

---

回復：
在 JavaScript 中，您可以將函數分配給變量。 您可能在執行以下操作時一直這樣做：

function hello() {
  //
}

您定義window.hello 。
您正在添加到全局命名空間。
JavaScript 窗口對象
這通常會導致不明確的 JavaScript 架構/意大利面條式代碼。
我使用命名空間結構進行組織。
這方面的一個小例子是：

應用程序.js

var app = {
  controllers: {}
};

您正在使用具有對象值的controllers鍵定義window.app （只是一個json對象）。

東西-ctlr.js

app.controllers.somethingCtlr.eventName = function(evt) {
  //evt.preventDefault?
  //check origin of evt? switch? throw if no evt? test using instanceof?
  alert('hi');
}

您正在之前定義的app.controllers.somethingCtlr上定義app.controllers.somethingCtlr名為eventName的新鍵。

您可以使用();調用該函數(); .

app.controllers.somethingCtlr.eventName();

這將轉到對象中的鍵，然后調用它。 您可以像這樣將函數作為變量傳遞。

anotherFunction(app.controllers.somethingCtlr.eventName);

然后你可以像這樣在函數中調用它

function anotherFunction(someFn) { someFn();}

javascript文件的結構如下：

  +-html
  +-stylesheets
  +-javascript-+
               +-app-+
                     +-app.js
                     +-controllers-+
                                   +-something-ctlr.js

通過chrome 開發人員工具調用：

app.controllers.somethingCtlr.eventName();

您可以將其作為變量傳遞，如下所示：

$(document).ready(function() {
  $('button').click(app.controllers.somethingCtlr.eventName);
});

JQuery（參考）。

我希望這會有所幫助，里斯

Answer 2

看起來您走在正確的軌道上，但語法有誤。 調用函數時不需要{ } 。 一旦您在calculateTotals函數中添加代碼，此代碼就應該正常運行。

$(".product_table").on('change', '.edit_quantity', function () {
  calculateTotals();
});

$("input[type='checkbox']").on('click',function() {
  calculateTotals();
});

function calculateTotals() {
  //your code...
}

Answer 3

您可以將其全部壓縮為一個函數。 onchange 事件適用於復選框和文本輸入（不需要單擊處理程序）。 jQuery 允許您添加多個選擇器。

 $('input[type=checkbox], .product_table .edit_quantity').on('change', function() { console.log('do some calculation...'); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="product_table"> <input type="checkbox"> <input class="edit_quantity"> </div>