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

时间:2017-07-26 08:59:08

标签: jquery

我有两个循环,一个带有一组按钮,另一个带有一组跨度。当我将鼠标悬停在其中一个按钮上时,我希望相应的范围可以改变颜色。他们都指望他们从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>

Dot loop(对应项目):

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

1 个答案:

答案 0 :(得分:2)

您没有将密钥传递给.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');
});