我有两个循环,一个带有一组按钮,另一个带有一组跨度。当我将鼠标悬停在其中一个按钮上时,我希望相应的跨度改变颜色。它们都有一个从 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>
最佳答案
您没有将 key 传递给 .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');
});
关于jquery - 迭代两次循环,悬停一个按钮,更改对应元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45322143/