如何触发与当前按钮关联的远程元素?

时间:2012-04-09 14:38:55

标签: jquery hover mouseevent contains

如何触发与当前按钮关联的远端元素?

例如,

HTML

<ul class="menu-1">
    <li><a href="#">button 1</a></li>
    <li><a href="#">button 2</a></li>
    <li><a href="#">button 2</a></li>
</ul>

<ul class="menu-2">
    <li><a href="#">button 1</a></li>
    <li><a href="#">button 2</a></li>
    <li><a href="#">button 2</a></li>
</ul>

因此,当我将按钮1 悬停在menu-1中时,menu-2中的按钮1 也应该悬停。

因此,当我将按钮1 悬停在menu-2中时,menu-1中的按钮1 也应该悬停。

我的工作jquery,

$(".menu-1 li").hover(function () {

        var text = $(this).text();

        if ($('.menu-2 li a:contains("'+text+'")').length > 0) {
            $('.menu-2 li a:contains("'+text+'")').trigger("mouseenter");
        }
    });

的jsfiddle,

http://jsfiddle.net/JDG7U/

4 个答案:

答案 0 :(得分:2)

我使用的方法是将:hover替换为.hover类,并将CSS更改分配给该类。然后,我为每个data-添加了li属性并对其进行了过滤。 (使用类会导致问题,因为在没有选择hover类的情况下我无法读取任意类属性。)

有点复杂,但它留下了一些非常简短的代码,并且如果你需要,它允许重新排序元素。

HTML:

<ul class="menu-1">
    <li data-num="1"><a href="#">button 1</a></li>
    <li data-num="2"><a href="#">button 2</a></li>
    <li data-num="3"><a href="#">button 3</a></li>
</ul>

<ul class="menu-2">
    <li data-num="2"><a href="#">button 2</a></li>
    <li data-num="3"><a href="#">button 3</a></li>
    <li data-num="1"><a href="#">button 1</a></li>
</ul>​

JS:

$('ul li').hover(function() {
    var num = $(this).data('num');
    $('li').filter(function() {
        return $(this).data('num') === num;
    }).toggleClass('hover');
});​

CSS:

ul li.hover a {
    color: green;
}​

http://jsfiddle.net/he7Uk/2/

答案 1 :(得分:1)

据我所知你无法真正触发伪类,例如:以这种方式悬停,但你可以在JS中使用类或在mouseenter / mouseleave事件中设置样式,或者只是直接更改CSS,像:

$(".menu-1 li").on({
    mouseenter: function () {
       var index = $(this).index();
       $('.menu-2 li a').eq(index).css('color', 'green');
    },
    mouseleave: function() {
       var index = $(this).index();
       $('.menu-2 li a').eq(index).css('color', 'black');
    }
});​

FIDDLE

或与班级一起工作:

$(".menu-1 li, .menu-2 li").on({
    mouseenter: function () {
        var index = $(this).index(),
            elems = $('.menu-1 li a:eq('+index+'), .menu-2 li a:eq('+index+')');
        $(elems).addClass('hover');
    },
    mouseleave: function () {
        var index = $(this).index(),
            elems = $('.menu-1 li a:eq('+index+'), .menu-2 li a:eq('+index+')');
        $(elems).removeClass('hover');
    }
});​

FIDDLE

答案 2 :(得分:1)

还有一个使用:nth-child的变体:

$lis = $('.menu li');
$lis.hover(function() {
    var index = $(this).index() + 1;
    $lis.filter(':nth-child(' + index + ')').addClass('hovered');
}, function() {
    $lis.removeClass('hovered');
});​

演示:http://jsfiddle.net/JDG7U/5/

答案 3 :(得分:0)

为他们提供相同的.class