document.querySelectorAll() Funktion funktioniert nicht auf alle Elemente

Question

I document.querySelectorAll() Funktion bin mit <a> in meiner Liste der <li> zu fangen, aber die Funktion funktioniert nicht auf alle Elemente Ich mag dieses document.querySelectorAll('//elements')[0] definieren haben, document.querySelectorAll('//elements')[1] wenn ich so definieren Es funktioniert nur bei Elementen auf diesem Index.

Ich denke nicht, dass es gut ist, so für alle Elemente zu definieren. Kann mir bitte jemand sagen wo ich falsch liege, warum es nicht an allen Elementen funktioniert.

Hier ist meine aktuellen Code

HTML

<ul class="questions"> 
    <li> 
     <a href="#" class="clearfix"><span class="faq_name">My Account</span><span class="arrow"><img src="images/plus.png"></span></a> 
     <div class="answer_box"> 
      <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. </p> 
     </div> 
    </li> 
    <li> 
     <a href="#" class="clearfix"><span class="faq_name">Categories</span><span class="arrow"><img src="images/plus.png"></span></a> 
     <div class="answer_box"> 
      <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. </p> 
     </div> 
    </li> 
    <li> 
     <a href="#" class="clearfix"><span class="faq_name">Trouble with check-in</span><span class="arrow"><img src="images/plus.png"></span></a> 
     <div class="answer_box"> 
      <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. </p> 
     </div> 
    </li> 
</ul> 

JS

document.querySelectorAll('.questions li a').onclick = function() {myFunction()}; 
function myFunction(){ 
    alert('asd'); 
}; 

Answer 1

fand ich einen einfacheren Weg, mit einer Schleife, in der Schleife, bis die Länge der Elemente laufen wird

var question = document.querySelectorAll('.questions li a'); 
var i; 
for(i=0;i<question.length;i++){ 
    question[i].addEventListener('click',myFunction) 
} 
function myFunction(){ 
    alert('adasd'); 
} 

Jedes Ding gleiche nur den Klick in Schleife aufrufen.

Answer 2

querySelectorAll gibt eine Sammlung von Elementen. Das DOM verfügt nicht über eine "set-based" -Funktion, mit der Sie Handler dem gesamten Satz in einer Anweisung zuweisen können (die jQuery-Bibliothek tut dies, wenn Sie es verwenden möchten), Sie müssen eine Schleife verwenden.

Zum Beispiel:

Array.prototype.forEach.call(
    document.querySelectorAll('.questions li a'), 
    function(element) { 
     element.onclick = myFunction; 
    } 
); 
function myFunction(){ 
    alert('asd'); 
} 

Dort verwenden wir Array#forEach eine Schleife durch die Sammlung (weil es auf jedes arrayartigen Objekt verwendet werden kann, nicht nur Arrays). Sie haben mehrere andere Optionen, die im Array-ähnlichen Teil von this answer beschrieben sind.

---

Exkurs 1: verwendete ich MyFunction direkt oben, da es in einer Funktion Verpackung, die gerade nennt es unnötig erscheint, aber das wird sich ändern, welche Argumente sie erhält, so einen Wrapper hinzufügen, wenn nötig.

Exkurs 2: Während ich es nicht oben ändern, empfehle ich dringend die Verwendung addEventListener (und attachEvent wenn Sie IE8 haben zu unterstützen oder den kaputten „Kompatibilitätsmodus“ von IE9-IE11) statt onclick.

Seitennotiz 3: Für diesen speziellen Anwendungsfall können Sie in Ereignisdelegation anstatt einen Handler zu jedem Element hinzufügen. Bei der Ereignisdelegierung fügen Sie einen Handler zu einem Container hinzu, in dem alle Ihre Links enthalten sind (könnte document.body sein, aber normalerweise gibt es einen Container, der näher an ihnen liegt), und wenn das Ereignis eintritt, sehen Sie, ob es einen übergeben hat passendes Element beim Blubbern.

Seitennotiz 4: Bei den Gelegenheiten, bei denen Sie nur das erste Spiel wünschen, verwenden Sie querySelectorAll(...)[0], querySelector(...). Es gibt das erste Spiel zurück, oder null, wenn nichts passt.

Answer 3

Sie müssen die "HTMLcollection" in ein Array konvertieren und dann das Array loopen, um Ereignis-Listener an jedes Element zu binden.

von "calling" Array.prototype.slice auf einem 'Array-like-Objekten', slice iteriert & füllt ein neues Array, der zurückgegeben wird. Dann können Sie Array-Methoden für dieses Array verwenden.

Array.prototype.slice.call(document.querySelectorAll('.questions li a')) 
 
//converts HTMLCollection to an array 
 
//or Array.apply(null ,document.querySelectorAll('.questions li a')) 
 

 
.forEach(function(element){ 
 
element.onclick = function(){ 
 
//do something 
 
} 
 
})