要素データに基づいてJSONをツールチップに埋め込みます - ツールチップの値

Question

可能であれば、次のようなアドバイスやドキュメントを探してください（私のためにこれを行う人を探しているわけではありません。やってみたいです）。

ホールドされた要素のデータツールチップの値に基づいて、ツールチップポップアップにデータを挿入します。ツールチップにJSONを挿入する方法を見つけましたが、最初に要素を共通の値でチェックしてJSONで同じ値を検索してから、ツールチップに値を設定する方法は見つかりませんでした。

したがって、たとえば、私は別のデータツールチップの値を持つ3つの別々の<div>を持っていることがわかります。私がしたいのは、ホールドされたときに、ツールチップがデータツールチップの値と同じ名前のjsonオブジェクトからJSONを取り込むということです。

divをJSONデータで埋め込む方法はわかりますが、要素内のデータ（要素のデータツールヒント値など）に基づいてJSONデータを検索する方法はわかりません。

ex。要素data-tooltip value = "skill-one"の場合、 "skill-one"オブジェクトのJSONをツールチップに埋め込むにはどうすればよいですか？または、JSを記述して2つを比較するにはどうすればよいですか？

私はこれを行うには誰かを探していないことを行う方法を学ぶために願っています。私は何時間も研究してきましたが、それほど遠くには達していません。

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() { 
 
    \t $('.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')を使用する必要があります。

上記の振り返りはOPの質問に対する回答ではなく、掲載された関連するコードに照らして考えてください。

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>