如何在不使用全局變量的情況下使數據隨時可用於多個Javascript函數？

Question

我有一個ASP.NET項目，該項目實際上是一個單頁面應用程序，它同時利用剃須刀和Javascript來呈現頁面並提供用戶控制。

在我的應用程序中，有許多任務結構，每個任務結構都有自己的獨立ID，這些任務在列表中顯示給用戶。 作為提供用戶控制的一部分，每個任務都有許多按鈕，使用戶可以執行某些操作。 例如完成任務。

由於單個頁面上有多個任務，因此需要一種從另一個任務中識別一個任務的方法，這是通過前面提到的taskId完成的。 例如，“完成”按鈕將包含自定義屬性data-taskId ，然后可以將其檢索並傳遞給Javascript函數以供使用。

但是我的問題是實際上首先為Javascript函數提供taskId 。 我正在使用jQuery，它通過.on("click")提供點擊功能。 這意味着我可能具有以下功能。

$(".complete-button").on("click",
        function (event) {
           //1. get taskId
           //2. complete the task with taskId 
        });

因此，我所有具有.complete-button類的.complete-button都將能夠執行此功能。 每個任務都有其自己的完成按鈕，我希望該按鈕僅能夠完成與之關聯的任務。

我需要知道為此功能提供正確運行的taskId的最佳方法是什么。 該項目中的其他代碼是由另一個程序員編寫的，它們使用了隱藏的<input>元素，這些元素將數據存儲在html頁面中，然后jQuery可以檢索此數據並在函數中使用。 以下是其外觀的示例：

HTML

<input type="hidden" class="case-status" value="@Model.Status" />

JS

$(".status-button").on("click",
            function (event) {
               var status = $(".case-status").val();
               //2. do something with status 
            });

但是，這是行不通的，因為由於一次要向用戶呈現多個任務，所以無法預先設置這些變量之一。 由於有多個任務，因此不能有一個包含當前任務的元素，因為用戶可以單擊任何任務上的任何完整按鈕。

相反，我需要一種從完成按鈕檢索data-taskId值並將其推送到完成按鈕的onClick函數的方法，我不確定如何做到這一點，並且還遵循良好的做法。

Answer 1

您回答了自己的問題：

“完成”按鈕將包含自定義屬性data-taskId

要在click事件中獲取該信息，只需從clicked元素中獲取該data屬性：

$(".complete-button").on("click",
    function (event) {
       let taskId = $(this).data('taskId');
       //2. complete the task with taskId 
    });

在事件處理程序中， this是指觸發事件的DOM元素。 可以從this執行存儲在該元素中的任何信息，相對於該元素的DOM遍歷等等。

Answer 2

相反，我需要一種從完成按鈕檢索data-taskId值並將其推送到完成按鈕的onClick函數的方法，我不確定如何做到這一點，並且還遵循良好的做法。

它是否是“良好實踐”，是基於意見的。 您需要確保，如果用戶使用devtools並將屬性修改為他們不應該完成的任務，則服務器將拒絕完成該任務。 （但這只是“永遠不要信任客戶端發送給您的任何消息。” :-)）

要使用該任務ID，只需從按鈕中獲取它即可：

$(".status-button").on("click", function (event) {
   var status = $(".case-status").val();
   var taskId = $(this).attr("data-taskId"); // <==================
});

有關為什么我在那里使用attr而不是data ，請參attr 答案 。 您可能更喜歡使用attr或data ，這取決於您是否要使用jQuery的數據緩存。 對於這樣簡單的事情，似乎有點過分了。

---

這行有點讓人懷疑：

var status = $(".case-status").val();

只要您確實只希望第一個匹配元素的值，而不管按下了哪個完整按鈕，就可以了。 如果您需要在多個.case-status找到一個（與完成的任務有關的狀態），我們需要查看HTML來描述如何執行此操作，但是通常可以使用closest和find 。