Wie löst man ein entferntes Element aus, das mit der aktuellen Schaltfläche verknüpft ist?

Wie kann ich das entfernte Element auslösen, das mit der aktuellen Schaltfläche verknüpft ist?Wie löst man ein entferntes Element aus, das mit der aktuellen Schaltfläche verknüpft ist?

Zum Beispiel

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>

Also, wenn ich schweben die Taste 1 in menu-1, die Taste 1 in menu-2 sollte auch schwebte werden.

Und so, wenn ich schweben die Taste 1 in menu-2, die Taste 1 in menu-1 sollte auch schwebte werden.

meine Arbeits 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/

Quelle

2012-04-09 laukok

Gibt es keine Möglichkeit, entweder 'id' verwenden können,' CLASS' oder 'Daten x' die Beziehungen zwischen den Elementen zu identifizieren Attribute? Die Übereinstimmung mit Textinhalten ist eher langsam und hässlich. Was passiert auch, wenn Sie "Taste 1" in Menü 1 und "Taste 11" in Menü 2 haben. Sie würden übereinstimmen, wenn ': enthält' –

ja es ist nicht notwendig, durch Text, irgendwelche besseren Vorschläge/Lösungen sind willkommen. Vielen Dank. – laukok

Der Ansatz, den ich verwendet, ist Ihr :hover mit einer .hover Klasse zu ersetzen und weisen Sie die CSS-Änderungen dieser Klasse zu. Dann fügte ich ein data- Attribut zu jedem li hinzu und filterte darauf. (Die Verwendung einer Klasse verursachte Probleme, weil ich kein beliebiges Klassenattribut lesen konnte, ohne auch die Klasse zu übernehmen.)

Ein bisschen kompliziert, aber es hat einen ziemlich kurzen und einfachen Code hinterlassen, und es erlaubt die Nachbestellung von die Elemente, wenn Sie das brauchen.

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/

Quelle

2012-04-09 15:08:51 Blazemonger

danke für die Antwort, mblase. liebte seine Einfachheit! aber ich frage mich, ob das ein gültiger html ist, indem ich 'data-num =" x "' zum li-element hinzufüge? – laukok

@lauthiamkokok Ja, das ist ein gültiges HTML5-Attribut, und sogar HTML4 erlaubt das Hinzufügen neuer Attribute zum Tag (die ignoriert werden, wenn sie nicht erkannt werden). jQuery importiert automatisch alle 'data-' Attribute zur Verwendung mit der '.data()' Methode, was es zu einer bequemen Möglichkeit macht, beliebige Daten in den DOM Elementen selbst zu speichern. – Blazemonger

'Das ist ein gültiges HTML5-Attribut, sogar HTML4 erlaubt das Hinzufügen neuer Attribute zum Tag (die ignoriert werden, wenn sie nicht erkannt werden)' großartig, das zu wissen! vielen Dank! – laukok

Geben Sie ihnen beide gleich .class

Quelle

2012-04-09 14:42:11 RASG

Bitte erläutern Sie mit einem konkreten Codebeispiel. Ich vermute, es wird nicht so leicht funktionieren, wie Sie zu denken scheinen. – Blazemonger

Soweit ich weiß, kann man nicht wirklich pseudo auslösen Klassen wie : schweben Sie auf diese Weise, aber Sie könnten eine Klasse verwenden oder die Stile in einem mouseenter/mouseleave-Ereignis in JS festlegen oder einfach das CSS direkt ändern ly, so etwas wie:

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

oder mit Klassen, arbeiten beide Richtungen:

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

Quelle

2012-04-09 15:08:41 adeneo

Gute Antwort, aber ich mag nicht die Annahme, dass die Elemente in jeder Liste immer in der gleichen Reihenfolge wie einander sein werden. – Blazemonger

@ mblase75 - Ja, sie müssten in der richtigen Reihenfolge sein, sonst ist eine Art von Bezeichner erforderlich, wie Ihre Datenattribute usw. Oder Sie verwenden den Inhalt, um sie zu identifizieren. Der letzte, der nicht sehr effizient ist, funktioniert immer noch. Ich konnte nur daran denken, den HTML-Markup zu ändern und den Inhalt nicht zu verwenden, sondern stattdessen den Index. – adeneo

Und noch eine Variante mit :nth-child:

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

Demo: http://jsfiddle.net/JDG7U/5/

Quelle

2012-04-09 15:10:25 dfsq

danke für diese antwort, dfsq! – laukok

Wie löst man ein entferntes Element aus, das mit der aktuellen Schaltfläche verknüpft ist?

Antwort

Verwandte Themen