迭代两个循环，悬停一个按钮，更改相应的元素

Question

我有两个循环，一个是一组按钮，另一个是一组跨度。当我将鼠标悬停在其中一个按钮上时，我希望相应的跨度改变颜色。他们都指望他们从0开始，这应该把两个项目结合在一起。

这是我的尝试，我哪里错了？它似乎没有做任何事情。

$('.toggle').each(function() { 
      var item = $(this).data(); 
      $('.feature-dot[data-number="'+ item +'"]').css('background-colour', 'green'); 
     }, function() { 
      $('.feature-dot[data-number="'+ item +'"]').css('background-colour', 'yellow'); 
     }); 

纽襻：

 <li> 
      <a class="toggle dot-link-<?php echo $count; ?>" data-number="<?php echo $count; ?>" href="javascript:void(0);"><?php the_sub_field('title'); ?> <span class="opener">+</span><span class="closer">-</span></a> 
      <span class="inner"> 
       <?php the_sub_field('content'); ?> 
      </span> 
     </li> 

点环路（对应项）：

<span class="feature-dot dot-<?php echo $counter; ?>" data-number="<?php echo $counter; ?>" style="top:<?php echo $top; ?>px;left:<?php echo $left; ?>px;"></span> 

Answer 1

你不及格的关键.data()方法，使用它像

var item = $(this).data('number'); 

而不得不使用.hover()函数代替.each()来附加事件处理函数。

$('.toggle').hover(function() { 
    var item = $(this).data('number'); 
    $('.feature-dot[data-number="' + item + '"]').css('background-color', 'green'); 
}, function() { 
    var item = $(this).data('number'); 
    $('.feature-dot[data-number="' + item + '"]').css('background-color', 'yellow'); 
});