現在のボタンに関連付けられている離れた要素をトリガーする方法はありますか？

Question

現在のボタンに関連付けられている遠い要素をどのようにトリガーできますか？例えば

私はボタンmenu-1で1を置くと、

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> 

だから、ボタンmenu-2で1も推移する必要があります。

そして、私はボタンmenu-2で1を置くときに、ボタン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/

Answer 1

私が使用したアプローチは、.hoverクラスを使用して:hoverを交換することですそのクラスにCSS変更を割り当てます。次に、それぞれliにdata-という属性を追加し、それをフィルタリングしました。 （クラスを使用すると、問題が発生しました。なぜなら、私は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：:nth-childを使用して

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

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

Answer 2

は両方とも同じ.class

Answer 3

は、私の知る限りでは、あなたが本当に好きな疑似クラスをトリガすることはできませんそれらを与えます：その方法でホバーしますが、JSをmouseenter/mouseleaveイベントでクラスを使用するかスタイルを設定するか、直接CSSを変更することができますLY、のようなもの：両方の方法を作業

$(".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

Answer 4

そして1つの以上の変異体：

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