javascript - 根据元素数据工具提示值使用 JSON 填充工具提示

Question

如果可能的话，只是寻找有关以下内容的一些建议或文档(不是找人帮我做这件事，我似乎找不到任何与我想做的事情相关的东西)。

我想用基于悬停元素数据工具提示值的数据填充工具提示弹出窗口。我已经找到了如何使用 JSON 填充工具提示，但没有找到如何首先检查元素的公共(public)值并在 JSON 中搜索相同的值然后填充工具提示。

例如，下面你会看到我有 3 个独立的 <div>具有不同的数据工具提示值。我想做的是，当鼠标悬停时，工具提示将填充来自与数据工具提示值同名的 json 对象的 JSON。

明确地说，我了解如何使用 JSON 数据填充 div，但我不知道如何根据元素内的数据(例如元素数据工具提示值)搜索 JSON 数据。

例如。如果元素 data-tooltip value =“skill-one”，那么我如何使用来自“skill-one”对象的 JSON 填充工具提示？或者我如何编写JS来比较两者？

如有任何帮助，我们将不胜感激，我正在学习如何做这件事，而不是找人帮我做这件事。我已经研究了几个小时，但还没有走得太远。

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 tooltip = $("<div class='tooltip'>test</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

在 jQuery 中使用 data 属性时，使用函数 data(name)。在你的情况下，而不是 $(this).attr('tooltip') --> $(this).data('tooltip')。您还可以使用 attr 访问数据对象，但您需要使用完整的属性名称:$(this).attr('data-tooltip')。

The above in retrospect is not the answer to the OP's question, but in light of the posted code relevant.

真正的解决方案是这部分:

var tooltipJSON = tooltipData[$(this).data("tooltip")];
var tooltipValues = [];

if (tooltipJSON) {
  $.each(tooltipJSON, function(key, value) {
    tooltipValues.push(key + ":" + value);
  });
}

它使用 data 对象从 javascript 对象 tooltipData 获取正确的对象。之后，它使用 $.each 遍历所有值，将它们放入一个新数组中。之后使用 join 将值放入工具提示中。

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);
      });
    }

    var tooltip = $("<div class='tooltip'>" + tooltipValues.join("<br>") + "</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();
  }
);

divd {
  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>