Question

有人可以帮我解释一下，当console.log(tooltipValues填充没问题时，为什么我的console.log(tooltipJSON)会以未定义的形式返回？

我不完全确定原因，但是当我将数据放在我的JS中时，它运行得很好。但是只要我将数据导出到JSON文件就会中断。要明确的是，当它是外部JSON文件时，我console.log(tooltipJSON)没问题。由于长期持有1000条记录，我无法嵌入JSON，因此超级坚持这一点。

var tooltipJSON;
    $.getJSON("js/tooltips.json", function (data) {
      tooltipJSON = data;

      $('.skill, .trinket, .hero').hover(
        function() {
          var tooltipValues = tooltipJSON[$(this).data("tooltip")];    
          console.log(tooltipValues);
          console.log(tooltipJSON);

          if(!tooltipValues)return;
          var tooltip = $("<div class='tp-popup'><div>" + tooltipValues.value1 + "</div><div>" + tooltipValues.value2 + "</div></div>")
            .css({
              'color': '#fff',
              'position': 'absolute',
              'zIndex': '99999',
              'width': '100px',
              'height': '150px',
              'background-color': '#333',
            });
          $(this).append(tooltip);
          $(document).on('mousemove', function(e) {
            $('.tp-popup').css({
              left: e.pageX,
              top: e.pageY,
            });
          });
        },
        function() {
          $('.tp-popup').remove();
        }
      ); 
    });

上面使用的外部JSON：

[
  {
    "skill-one": {
        "value1": "skill-one value1",
        "value2": "skill-one value2",
        "value3": "skill-one value3"
    },
    "trinket-two": {
        "value1": "trinket-two value1",
        "value2": "trinket-two value2",
        "value3": "trinket-two value3"
    }
  }
]

虽然没有问题但是没有问题？

tooltipJSON = {
    "skill-one": {
      "value1": "skill-one value1",
      "value2": "skill-one value2",
      "value3": "skill-one value3"
    },
    "trinket-two": {
      "value1": "trinket-two value1",
      "value2": "trinket-two value2",
      "value3": "trinket-two value3"
    },
}
$('.skill, .trinket, .hero').hover(
        function() {
          var tooltipValues = tooltipJSON[$(this).data("tooltip")];    
          console.log(tooltipValues);
          console.log(tooltipJSON);

          if(!tooltipValues)return;
          var tooltip = $("<div class='tp-popup'><div>" + tooltipValues.value1 + "</div><div>" + tooltipValues.value2 + "</div></div>")
            .css({
              'color': '#fff',
              'position': 'absolute',
              'zIndex': '99999',
              'width': '100px',
              'height': '150px',
              'background-color': '#333',
            });
          $(this).append(tooltip);
          $(document).on('mousemove', function(e) {
            $('.tp-popup').css({
              left: e.pageX,
              top: e.pageY,
            });
          });
        },
        function() {
          $('.tp-popup').remove();
        }
      );

这是要关注的代码，无论出于何种原因，console.log(tooltipValues);不能与外部JSON一起使用，但JSON本身的控制台日志可以正常工作并且不会出现任何问题。请注意，consoles.log都使用嵌入式内部JSON。

$('.skill, .trinket, .hero').hover(
        function() {
          var tooltipValues = tooltipJSON[$(this).data("tooltip")];    
          console.log(tooltipValues);
          console.log(tooltipJSON);

Answer 1

JQuery的getJSON方法在不同的JQuery版本中的工作方式不同，除非您实现fail回调，否则会产生无提示错误。在JSON内容结束之前，您有一个尾随comma导致方法失败。此外，我使用的是JQuery 2.1，该方法没有显示任何内容。我升级到版本3.1.1，然后跟踪并修复错误。以下是我测试的相关代码。

var tooltipJSON;
$.getJSON("js/tooltips.json", function (data) {
  tooltipJSON = data;
  console.log("data", data);
  var key = $(this).data("tooltip"), tooltipValues = tooltipJSON[key];
  console.log("'"+key+"'", tooltipValues);
}).fail(function (err) {
  console.log("error", err);
});

外部JSON应该是对象{...}，而不是包含对象[{...}]的数组：

{
  "skill-one": {
    "value1": "skill-one value1",
    "value2": "skill-one value2",
    "value3": "skill-one value3"
  },
  "trinket-two": {
    "value1": "trinket-two value1",
    "value2": "trinket-two value2",
    "value3": "trinket-two value3"
  }
}

使用.getJSON但未使用嵌入数据时，控制台中未定义的JSON错误

1 个答案: