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的完整按钮都将能够执行此功能。每个任务都有其自己的完成按钮，我希望该按钮仅能够完成与之关联的任务。

我需要知道用正确运行的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"); // <==================
});

请参阅this answer，以了解为什么我在那里使用attr而不是data。您可能更喜欢使用attr或data，具体取决于您是否要使用jQuery的数据缓存。对于这样简单的事情，似乎有些矫kill过正。

此行有点可疑：

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

假设您确实只希望 first 匹配元素的值，而不管按下了哪个完整按钮就可以了。如果您需要从众多.case-status中找到一个{{1}}（与已完成的任务有关），我们需要查看HTML来描述如何执行此操作，但是通常可以使用closest和find。

如何在不使用全局变量的情况下使数据随时可用于多个Javascript函数？

2 个答案: