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

Question

因此，我最终创建了一个可运行且可测试的示例。 到目前为止，我要做的是创建了两个按钮，将它们悬停时都显示工具提示。

当您单击按钮时，它允许yuo从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

您只需这样做：

$('.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;
});

Answer 3

尝试一下。我为headTip和eckTip添加了一个变量。我正在分配此值（我在模式显示中绑定的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>