Question

我对JS和JQuery比较陌生。我想在每次鼠标悬停在$('.popUp')上时向$('li') 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>

Answer 2

尝试一下。

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

 let array = ['Bob', 'Mary', 'Kenny', 'Bill']
   $('li').on('mouseover', function(){

     var $index = $(this).index();    
     $('.popUp').html(array[$index]);

   });

Answer 3

您可以使用Options +FollowSymLinks DirectorySlash On RewriteEngine On SetEnvIf Request_URI ^(.*)/$ CUSTOM_BASE_DIR=$1 # Remove trailing slash for non directories RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.*)/$ %{ENV:CUSTOM_BASE_DIR} [R,L=303] # Make direct files accessible RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_URI} !^base.php.*$ RewriteRule ^([^\n]+)|(.*)$ base.php?___ROUTE=$1 [QSA,END]对象

this

Answer 4

使用数组在列表中创建名称，然后像将鼠标悬停在每个li的文本并将其传递给div一样简单。

请注意，没有在实际li中传递任何内容-您将在列表中没有任何文本-仅有空li并带有项目符号。

let array = ['Bob', 'Mary', 'Kenny', 'Bill'];


array.forEach(function(item){
  $('#names').append('<li>'+ item + '</li>');
})

 $('body').on('mouseover','li', function() {
    var text = $(this).text();
    $('.popUp').html(text)

 })

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

Answer 5

使用以下代码

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

<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>

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

5 个答案: