Question

我目前正在制作一个项目，其中我有不同的字符，当您将鼠标悬停在每个项目上时，会显示有关它们的信息。虽然我可能能够通过ID传递这个问题，但我想知道是否有任何方法可以使用给定的信息（如使用indexOf）获取类中对象的位置。

<div class="people"> 
<div>Steve</div>
<div>James</div>
<div>Mike</div>`
</div>

<div class="peopleInfo">
<div>Likes pizza</div>
<div>Is a very good chef</div>
<div>Has a family to look after</div>
</div>

当我将鼠标悬停在每个人身上时，我会隐藏并显示.peopleInfo中的文字（我将该部分整理出来）。每个人都按时间顺序与每个人同步（即Steve Likes Pizza）。有没有办法让我可以通过盘旋在他身上获得史蒂夫的索引，以便制作文字＆＃34;喜欢披萨＆＃34;？

Answer 1

您可以这样做：

＆＃13;

$(() => {
  const people = $('.people div').toArray();
  const peopleInfo = $('.peopleInfo div').toArray();

  $('.people').on('mouseenter', 'div', ({target}) => {
    const info = peopleInfo[people.indexOf(target)];
    
    console.log(target.textContent, info.textContent);
  });
});

＆＃13;

.peopleInfo {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="people">
  <div>Steve</div>
  <div>James</div>
  <div>Mike</div>
</div>
<br/>
<div class="peopleInfo">
  <div>Likes pizza</div>
  <div>Is a very good chef</div>
  <div>Has a family to look after</div>
</div>

＆＃13;

通过悬停或单击对象获取类数组中类元素的位置

1 个答案: