0

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

例えば、

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、ボタン1 もホバーするmenu-2必要があります。

そのため、ボタン 1をホバーすると、menu-2ボタン1もホバーするmenu-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

4 に答える 4

2

私が使用したアプローチは、 your: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/

于 2012-04-09T15:08:51.023 に答える
1

そして、以下を使用するもう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/

于 2012-04-09T15:10:25.547 に答える
1

私の知る限り、そのように :hover のような疑似クラスを実際にトリガーすることはできませんが、クラスを使用するか、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');
    }
});​

フィドル

またはクラスを使用して、両方の方法で機能します。

$(".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');
    }
});​

フィドル

于 2012-04-09T15:08:41.090 に答える
0

両方に同じものを与える.class

于 2012-04-09T14:42:11.960 に答える