Question

我有一个看起来像这样的JSON字符串：

{
  "DocID": "NA2", 
  "DocType": "Phase1.1 - Visa Documents (This section is applicable for HK work location only)", 
  "DocSubType": "New Application", 
  "DocName": "Passport / Travel Document (Soft copy only) *", 
  "DocDescription": ""
}

在我的HTML中，我已将data-docid中的td属性设置为DocID键的值（在另一个API调用中）

现在，我想比较value.DocID是否等于==（docid）并在该特定DocSubType中插入td。

这是我的代码：

$.ajax({
  type: "GET",
  url: docuViewURL,
  success: function(data) {
    $.each(data, function(index, value) {
      console.log(index);
      var a = $("#candidateDetails tbody td a:eq(index)").attr("data-docid");
      var b = value.DocID;
      if (a == b) {
        // then
      }
    });
  }
});

它不起作用，甚至index变量也不会为我提供var a的输出，而是得到undefined。

我做错了什么，我可以改变什么。

Answer 1

首先，您没有将索引变量插入选择器。

这是concatenated string：

"#candidateDetails tbody td a:eq(" + index + ")"

这是template literal：

`#candidateDetails tbody td a:eq(${index})`

这是string literal：

"#candidateDetails tbody td a:eq(index)"

当您应该使用级联字符串或模板文字将index变量插入其中时，您正在使用包含单词“ index” 的字符串文字来选择所需的元素您的选择器字符串。

另一个问题是您要向:eq()选择器传递字符串而不是数字。

这是因为您错误地使用了$.each函数。

您正在遍历（JSON）对象，而不是数组，没有索引，有键，并且在您的情况下，键是字符串（ EG ：“ DocID “ ，“ DocType” ，“ DocSubType” 等）。

因此，即使您确实将index变量插入选择器中，这些选择器最终仍会导致：

"#candidateDetails tbody td a:eq(DocID)"
"#candidateDetails tbody td a:eq(DocType)"
"#candidateDetails tbody td a:eq(DocSubType)"
"#candidateDetails tbody td a:eq(DocName)"
"#candidateDetails tbody td a:eq(DocDescription)"

您可以使用属性选择器代替:eq()选择器来解决此问题（并为自己省很多麻烦），

"#candidateDetails tbody td a[data-docid]"

这避免了您手动指定元素索引，从而为HTML中元素的位置提供了更大的自由度。

另一件事是您的代码没有明确声明这是JSON GET请求。

当然，jQuery 可能足够聪明，可以告诉您这是什么样的请求，但是俗话说explicit is better than implicit，这不仅适用于Python程序。

我建议您使用jQuery.getJSON函数，该函数明确旨在创建JSON GET请求。

以此替换您的Ajax请求：

jQuery.getJSON(docuViewURL, function(data) {
  $.each(data, function(key, value) {
    // NOTE: cache elements not values
    var link = $("#candidateDetails tbody td a[data-docid]");
    // NOTE: if you're only going to use a value once, there's no need to cache it
    // NOTE: use `data("x")` instead of `attr("data-x")` for more concise code
    if (link.length > 0 && link.data("docid") == value.DocID) {
      // do stuff with the link
    }
  });
});

您还可以放弃data()函数，并使用属性选择器：

jQuery.getJSON(docuViewURL, function(data) {
  $.each(data, function(key, value) {
    // get the link and check to see if it exists
    var link = $("#candidateDetails tbody td a[data-docid='" + value.DocID + "']");
    if (link.length > 0) {
      // do stuff with the link
    }
  });
});

注意：：如果您需要更多信息，则jQuery API documentation带有一个搜索栏，您可以使用该搜索栏查找所遇到的功能的文档。

注意：：我并不是想粗鲁或侮辱您，但我认为，如果您阅读MDN JavaScript guide，将会大有帮助，这将有助于您了解基本知识和基本知识JavaScript。

注意：还有HTML和CSS指南。

祝您好运，请记住保留您的代码DRY, SOLID and Simple。

如何在JavaScript中将属性值与JSON值匹配？

1 个答案: