Zweiteilige jQuery-Frage – Anker zur Nachahmung von Tabulator- und Bindungsklickereignissen

Question

Frage

---

1. Ich hätte gerne einen Anker auf der Seite, der dieselbe Funktion wie die Registerkarte ausführt.
   Ich konnte es nur zum Laufen bringen, wenn ich so etwas platzierte $('#tabs ul a:first').click() im Onclick-Ereignis des jeweiligen Ankers.Notiz:Das href hat keine Auswirkung auf die Links außerhalb des Tab-Plugins.Es wird wahrscheinlich nur in den Ankern in der Registerkarte verwendet, wenn deren Klickereignis erstellt wird.

2. Ich bin auf ein jQuery-Bindungsproblem gestoßen.
   Anstatt für jeden Link eine DOM-Suche durchzuführen, wäre es besser, diese in einer Variablen zu speichern und das Klickereignis zum Klickereignis des externen Ankers hinzuzufügen.Wenn ein Selektor jedoch mehrere Objekte zurückgibt, scheint das Objekt im Array (höchstwahrscheinlich handelt es sich nicht um ein Array, sondern um ein Objekt) keine Funktionen zu haben.

JSFiddle-Beispiel

JS

---

$(function() {
    $( "#tabs" ).tabs(); 

    var tabs = $('#tabs ul li a');

    $( "#links2 a" ).each(function(index){
       $(this).bind('click',function(){
          (tabs[index]).click();
       });
    });
});

HTML/CSS (unvollständig)

---

<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css" />
<link rel="stylesheet" href="http://jqueryui.com/demos/demos.css" />
<style type="text/css">
   #links1 , #links2, #links3      { margin-top:1em; font-size:1.5em;}
   #links1 a, #links2 a, #links3 a { text-decoration:none; color:#0cf}
</style>
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Foo</a></li>
        <li><a href="#tabs-2">Bar</a></li>
        <li><a href="#tabs-3">Baz</a></li>
    </ul>
    <div id="tabs-1" ><p>Foo foo foo foo foo foo foo foo. foo-foo!</p></div>
    <div id="tabs-2" ><p>Bar bar bar bar bar bar bar bar. bar-bar!</p></div>
    <div id="tabs-3" ><p>Baz baz baz baz baz baz baz baz. baz-baz!</p></div>
</div>

<div id="links1">
   <div>HREF doesn't matter:</div>
   <a href="#tabs-1">foo</a>     
   <a href="#tabs-2">bar</a>           
   <a href="#tabs-3">baz</a>
</div>

<div id="links2">
   <div>Trying to dynamically bind onclick</div>
   <a href="#">foo</a> 
   <a href="#">bar</a>       
   <a href="#">baz</a>
</div>

<div id="links3">
   <div>What should happen, but not the right method:</div>
   <a href="#" onclick="$('#tabs li:first a').click()">foo</a>
   <a href="#" onclick="$('#tabs li a:eq(1)').click()//not sure if this is the best way to reference">bar</a>       
   <a href="#" onclick="$('#tabs li:last a').click()">baz</a>
</div>

Answer 1

Anstatt

(tabs[index]).click();

es sollte sein

tabs.eq(index).click();

Mit der ersten Form erhalten Sie das rohe DOM-Element, während Sie mit der zweiten ein mit jQuery umschlossenes DOM-Element erhalten.Es gibt keine „Klick“-Methode <a> Elementknoten, zumindest keine Standardmethode.(Alternative, $(tabs[index]) würde auch funktionieren.)