javascript - 根据索引将数组元素添加到弹出窗口

Question

我对 JS 和 JQuery 比较陌生。我想在每次鼠标悬停在 $('li') 上时向 $('.popUp') div 添加一个元素。这应该添加 array 中的元素，其索引与悬停在其上的 $('li') 的编号相匹配，即，如果我将鼠标悬停在 li[0 上]，我希望 array[0]('Bob') 出现在 $('.popUp') div 中。

let array = ['Bob', 'Mary', 'Kenny', 'Bill']
$('li').on('mouseover', () => {
  for (let i = 0; i < array.length; i++) {
    $('.popUp').html(array[i])
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class='popUp'></div>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

Answer 1

您可以使用.index()方法来获取元素的索引。

let array = ['Bob', 'Mary', 'Kenny', 'Bill']
$('li').on('mouseover', function(){
  $(".popUp").html(array[$(this).index()]);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class='popUp'></div>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>