Question

如果可能的话，只是寻找一些关于以下内容的建议或文档（不是寻找某人为我做这件事，我似乎无法找到任何与我想做的事情有关的事情）。

我想使用基于hovered元素data-tooltip值的数据填充工具提示弹出窗口。我已经找到了如何使用JSON填充工具提示，但不是如何首先检查元素的公共值，并在JSON中搜索相同的值，然后填充工具提示。

例如，下面你会看到我有3个单独的<div>具有不同的数据工具提示值。我想要做的是，当悬停时，工具提示将使用名为与data-tooltip值相同的json对象填充JSON。

要清楚，我理解如何使用JSON数据填充div，但我不知道如何根据元素内的数据搜索JSON数据（例如元素data-tooltip值）。

离。如果元素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') - ＆gt; $(this).data('tooltip')。您还可以使用attr访问数据对象，但需要使用完整的属性名称：$(this).attr('data-tooltip')。

回顾上述内容并不是OP问题的答案，而是根据所发布的相关代码。

真正的解决方案是这一部分：

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

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

它使用tooltipData对象从javascript对象data获取正确的对象。之后，它使用$.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>

使用基于元素数据工具提示值

1 个答案: