如何在jQuery中获取Razor表单触发链接的属性并精简代码？

嘿，我明白你想要精简这段处理Razor表单链接的jQuery代码，其实获取这些data-*属性很简单，而且可以写得很干净。咱们一步步来：

首先，你的点击事件里，用$(this)来指代触发点击的.wfAction元素会比event.target更可靠——因为event.target可能指向链接里的图标（比如那个fa-thumbs-up的子元素），而$(this)始终绑定到你监听的.wfAction元素本身。如果担心事件冒泡到子元素，也可以用$(event.target).closest(".wfAction")来确保拿到正确的链接元素。

获取不同类型的data属性 #

• 普通字符串/数值类型的data属性：比如data-id、data-actiontype，直接用jQuery的.data()方法就能获取：

  $(document).on("click", ".wfAction", function () {
    // 获取当前触发的链接元素
    const $actionLink = $(this);
    
    // 获取data-id（空字符串的话会返回""）
    const id = $actionLink.data("id");
    // 获取data-actiontype
    const actionType = $actionLink.data("actiontype");
  });
  

• JSON格式的data-payload：你的data-payload里是JSON字符串，jQuery的.data()方法会自动帮你解析成JavaScript对象，不用手动JSON.parse()，直接访问属性就行：

  $(document).on("click", ".wfAction", function () {
    const $actionLink = $(this);
    
    // 获取解析后的payload对象
    const payload = $actionLink.data("payload");
    // 访问里面的Id和projectId
    const itemId = payload.Id;
    const projectId = payload.projectId;
  });
  

完整的精简代码示例 #

把这些整合起来，你的点击函数可以写成这样：

$(document).on("click", ".wfAction", function () {
  const $link = $(this);
  
  // 提取所有需要的属性
  const actionData = {
    id: $link.data("id"),
    actionType: $link.data("actiontype"),
    itemId: $link.data("payload").Id,
    projectId: $link.data("payload").projectId
  };
  
  // 这里可以用actionData做后续操作，比如传给模态框或者AJAX请求
  console.log(actionData);
});

小补充：.data() vs .attr() #

如果有时候你需要获取原始的HTML属性字符串（比如data-payload的原始JSON串），可以用.attr("data-payload")，然后手动JSON.parse()：

const rawPayload = $link.attr("data-payload");
const payloadObj = JSON.parse(rawPayload);

不过一般.data()更方便，因为它会自动处理类型转换和缓存。

内容的提问来源于stack exchange，提问作者TrevorGoodchild