javascript - 无法调用由 JSON 创建的数组中的特定值 .push(ed) 到它吗？

Question

出于某种原因，我正在努力弄清楚如何从 JSON 调用 .push(ed) 到数组的特定值。

我有 .push(key + ":"value);推送到名为 tooltipValues 的数组。

当我执行 tooltipValues.join 时，我可以看到所有内容都填充在我的数组中，但是，该数组在控制台中看起来像这样:["value1:skill-one value1", "value2:skill-one value2 ", "value3:skill-one value3"] ，它没有创建与我的 JSON 相同的模型。例如，我希望能够调用 tooltipValues.value1，但我无法弄清楚如何做到这一点。我已经尝试了我能想到的一切。

有没有一种方法可以使 JSON 保持完整，以便我可以根据需要调用每个单独的值？我以这种方式进行设置的原因是能够查看 HTML 中的数据工具提示标签，将其与 JSON 进行比较，并提取与数据工具提示匹配的 JSON。

您将在下面的我的 JS 中看到我正在做什么并注释掉，我想这样做:

var tooltip = $("<div class='tooltip'>" + tooltipValues.join("<br>") + "</div>")
    // WHAT I WOULD LIKE TO DO 
    // var tooltip = $("<div class='tooltip'>" + tooltipValues.value1 + "</div><div>" + tooltipValues.value2 + "</div>)

这是我的代码:

tooltipData = {
  "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() {
    //console.log( 'hovering on' , $(this).attr('tooltip') ); 
    var tooltipJSON = tooltipData[$(this).data("tooltip")];
    var tooltipValues = [];
    
    if (tooltipJSON) {
      $.each(tooltipJSON, function(key, value) {
        tooltipValues.push(key + ":" + value);
        console.log(tooltipValues);
      });
    }
    var tooltip = $("<div class='tooltip'>" + tooltipValues.join("<br>") + "</div>")
    // WHAT I WOULD LIKE TO DO 
    // var tooltip = $("<div class='tooltip'>" + tooltipValues.value1 + "</div><div>" + tooltipValues.value2 + "</div>)
      .css({
        'color': '#fff',
        'position': 'absolute',
        'zIndex': '99999',
        'width': '100px',
        'height': '150px',
        'background-color': '#333',
      });
    $(this).append(tooltip);
    $(document).on('mousemove', function(e) {
      $('.tooltip').css({
        left: e.pageX + 10,
        top: e.pageY - 10
      });
    });
  },
  function() {
    $('.tooltip').remove();
  }
);

div {
  width: 100px;
  border: 1px solid #000;
  padding: 10px;
  margin: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='skill' data-tooltip="skill-one">Skill One</div>
<div class='trinket' data-tooltip="trinket-two">Trinket Two</div>
<div class='hero' data-tooltip="hero-three">Hero Vestal</div>

Answer 1

执行此操作的最佳方法是使用 JavaScript 对象而不是数组。数组使用索引来访问元素，而对象使用键值对，这就是您想要完成的任务。你应该这样说，而不是 .push(key + ":"value):

var tooltipValues = {}; //Initialize as an object instead of an array

// ... later on

tooltipValues[key] = value;

这将允许您使用表达式 tooltipValues.key 访问您的值

下面指出，虽然这个答案在技术上是正确的，但没有必要这样做，因为您已经拥有所需形式的对象。