如何将选定的索引数据分配给我的工具提示数据?

Question

所以我终于创建了一个可运行和可测试的示例。 到目前为止，我所做的是创建两个按钮，这两个按钮在悬停时都会显示工具提示。

单击按钮时，它允许您从Select元素中选择项目。

事情是这样的..

我想显示有关在相应工具提示中选择的项目的信息。

因此，如果我单击按钮headBtn并选择第一个选项，则我希望有关该选定选项的信息显示在将鼠标悬停在该按钮上时显示的工具提示中。

var theArray = [];
function getHeadData() {
$("#itemSelect").empty();
$.getJSON("https://api.myjson.com/bins/lf0tc", function (data) {
for (var i = 0; i < data.length; ++i) {
var html = '<option id="' + data[i].id + '">' + data[i].Name + '</option>';
$('#itemSelect').append(html);
}
theArray = data;
});
}
function getNeckData() {
$("#itemSelect").empty();
$.getJSON("https://api.myjson.com/bins/bw34w", function (data) {
for (var i = 0; i < data.length; ++i) {
var html = '<option id="' + data[i].id + '">' + data[i].Name + '</option>';
$('#itemSelect').append(html);
}
theArray = data;
});
}
$('.tooltip').mouseover(function(event){
var index = $(".tooltip").index(this);
switch (index) {
case 0:
//HeadItem
break;
case 1:
//NeckItem
break;

default:
break;
}

//How do I assign <h3> Item Name the value of theArray[i].Name?
//How do I assign Item Icon the value of theArray[i].Icon?
});
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var head = document.getElementById("headBtn");
// Get the button that opens the modal
var neck = document.getElementById("neckBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal 
head.onclick = function() {
modal.style.display = "block";
getHeadData();
}
// When the user clicks the button, open the modal 
neck.onclick = function() {
modal.style.display = "block";
getNeckData();
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}

.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<p>Move the mouse over the text below:</p>
<!-- Trigger/Open The Modal -->
<button class="tooltip" id="headBtn">Select Helmet
<div class="tooltiptext">
<h3 class=radio> Item Name </h3>  
<p class=radio> Icon </p>
</div>
</button>
<button class="tooltip" id="neckBtn">Select Necklace
<div class="tooltiptext">
<h3 class=radio> Item Name </h3>  
<p class=radio> Icon </p>
</div>
</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">&times;</span>
<p>Please Select An Item</p>
<select id="itemSelect">
</select>
</div>
</div>

Answer 1

我走了另一种方式，因为您的解决方案只有一个数组，一次只能处理一个项目信息，因此无论如何您都必须将数据保存在某个地方。

这个想法是将change侦听器绑定到您的下拉列表，并在选择后更改工具提示。

请注意，使用您当前的设置，这不会立即响应选择第一个项目，因为它被视为已选择并且不会触发change。解决此问题的最简单方法是添加一个没有值的占位符选项并在处理程序上对其进行过滤，但如果您不想要此占位符元素，可以通过侦听click来完成。

// Find first tooltip and save contents to a variable so we can restore it
emptyTooltip = $('.tooltiptext').first().html()
function getHeadData() {
getData("https://api.myjson.com/bins/lf0tc")
// Listen for changes on the 'select'. Pass the target div where to insert the result
$('#itemSelect').change(function() {
setData('#headBtn', $(this))
});
}
function getNeckData() {
getData("https://api.myjson.com/bins/bw34w")
$('#itemSelect').change(function() {
setData('#neckBtn', $(this))
});
}
function getData(url) {
/*
Since the 'select' itself doesn't get removed from the dom, 
still has the previous content and listener attached. 
We remove them to avoid affecting the wrong element.
*/
$("#itemSelect").empty().off('change');
$.getJSON(url, function(data) {
// Add a placeholder 'option' so it responds to the 'change' event
$('#itemSelect').append('<option value="">Select an item</option>');
for (var i = 0; i < data.length; ++i) {
var html = '<option value="' + i + '" data-icon="' + data[i].Icon + '">' + data[i].Name + '</option>';
// Collect other item statistics in the response.
let itemStats = {};
for (key in data[i]) {
if ((key != 'Icon') && (key != 'Name')) {        
itemStats[key] = data[i][key];
}
}
// Convert the option to a jQuery element and attach the data.
$html = $(html)      
$html.data('stats', itemStats);      
$('#itemSelect').append($html);
}
/*
This renders the placeholder option unnecessary since it forces
a selection on 'select' load. This is done to reset the tooltip
if the user dismisses the modal without selecting anything.
The placeholder option is what signals this, since it has no 'value'. 
Otherwise it would force the first 'option' in the dropdown.
*/
$('#itemSelect').trigger('change')
});
}
/*
target is where to insert the results
$item is the 'select' itself. Not really necessary 
since it always be '#itemSelect' and can be retrieved in the function.
*/
function setData(target, $item) {      
$selection = $item.children('option:selected')
// Get target element and corresponding tooltip
$span = $(target).children('.tooltiptext')
// Check if there's an actual selection or the placeholder item
if ($selection.val() != "") {
// Insert each element in its place
$span.children('h3').text($selection.text())
// Won't allow crossorigin elements
// img = $('img').attr('src', $selection.data('icon'))
$span.children('p').text('Icon Data')
// Item stats accesible here
// $selection.data('stats')
} else {
// No selection, reset tooltip.
$span.html(emptyTooltip);
}
}
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var head = document.getElementById("headBtn");
// Get the button that opens the modal
var neck = document.getElementById("neckBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal 
head.onclick = function() {
modal.style.display = "block";
getHeadData();
}
// When the user clicks the button, open the modal 
neck.onclick = function() {
modal.style.display = "block";
getNeckData();
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}

.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<p>Move the mouse over the text below:</p>
<!-- Trigger/Open The Modal -->
<button class="tooltip" id="headBtn">Select Helmet
<div class="tooltiptext">
<h3 class=radio> Item Name </h3>  
<p class=radio> Icon </p>
</div>
</button>
<button class="tooltip" id="neckBtn">Select Necklace
<div class="tooltiptext">
<h3 class=radio> Item Name </h3>  
<p class=radio> Icon </p>
</div>
</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">&times;</span>
<p>Please Select An Item</p>
<select id="itemSelect">
</select>
</div>
</div>

Answer 2

试试这个。我为 headTip 和 neckTip 添加了一个变量。OnChange 事件(我在模态显示上绑定(我正在分配此值。然后我只是在那里更换 h3。

var theArray = [];
var headTip, neckTip;
function getHeadData() {
$("#itemSelect").empty();
$.getJSON("https://api.myjson.com/bins/lf0tc", function (data) {
for (var i = 0; i < data.length; ++i) {
var html = '<option id="' + data[i].id + '">' + data[i].Name + '</option>';
$('#itemSelect').append(html);
}
theArray = data;
});
}
function getNeckData() {
$("#itemSelect").empty();
$.getJSON("https://api.myjson.com/bins/bw34w", function (data) {
for (var i = 0; i < data.length; ++i) {
var html = '<option id="' + data[i].id + '">' + data[i].Name + '</option>';
$('#itemSelect').append(html);
}
theArray = data;
});
}
$('.tooltip').mouseover(function(event){
var index = $(".tooltip").index(this);
switch (index) {
case 0:
//HeadItem
$(".tooltip h3").html(headTip);
break;
case 1:
//NeckItem
$(".tooltip h3").html(neckTip);
break;

default:
break;
}

//How do I assign <h3> Item Name the value of theArray[i].Name?
//How do I assign Item Icon the value of theArray[i].Icon?
});
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var head = document.getElementById("headBtn");
// Get the button that opens the modal
var neck = document.getElementById("neckBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal 
head.onclick = function() {
modal.style.display = "block";
getHeadData();
$("#itemSelect").off("change").on("change", function(e){
headTip = $(e.currentTarget).val()
});
}
// When the user clicks the button, open the modal 
neck.onclick = function() {
modal.style.display = "block";
getNeckData();
$("#itemSelect").off("change").on("change", function(e){
neckTip = $(e.currentTarget).val()
});
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}

.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<p>Move the mouse over the text below:</p>
<!-- Trigger/Open The Modal -->
<button class="tooltip" id="headBtn">Select Helmet
<div class="tooltiptext">
<h3 class=radio> Item Name </h3>  
<p class=radio> Icon </p>
</div>
</button>
<button class="tooltip" id="neckBtn">Select Necklace
<div class="tooltiptext">
<h3 class=radio> Item Name </h3>  
<p class=radio> Icon </p>
</div>
</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">&times;</span>
<p>Please Select An Item</p>
<select id="itemSelect">
</select>
</div>
</div>

Answer 3

你可以这样做：

$('.tooltip').mouseover(function(event){
var index = $(".tooltip").index(this);
switch (index) {
case 0:
//HeadItem
break;
case 1:
//NeckItem
break;
default:
break;
}
//NEW LINES
$("#headBtn > .tooltiptext > h3.radio").html(theArray[index].Name;
$("#headBtn > .tooltiptext > p.radio").html(theArray[index].Icon;
});