Wie nächste Element erhalten, nachdem „dieser“ - reine Javascript

Question

Ich habe Code:

var links = document.querySelectorAll('a[data-lightbox]'); 

for (var i = 0; i < links.length; i++) { 

    links[i].addEventListener('click', function() { 
    event.preventDefault(); 
    var imgLink = this.getAttribute('href'); 
    var imgTitle = this.getAttribute('title'); 
    var dataLightbox= this.getAttribute('data-lightbox'); 
    console.log(); //next element after "this." something like "links[i+1]" or i don't know... 
    }, false); 
} 

Ich möchte ‚Daten-Leuchtkasten‘ bekommen Attribut für das nächste Element, das ich zur Zeit angeklickt. Wie es geht?

Answer 1

ein IIFE Mit dem Trick kann den i Umfang

var links = document.querySelectorAll('a[data-lightbox]'); 
for (var i = 0; i < links.length; i++) { 
    (function(i){ 
     links[i].addEventListener('click', function() { 
     event.preventDefault(); 
     var imgLink = this.getAttribute('href'); 
     var imgTitle = this.getAttribute('title'); 
     var dataLightbox= this.getAttribute('data-lightbox'); 
     console.log(links[i + 1]); 
     }, false); 
    })(i) 

    } 

Answer 2

Sie können versuchen, bekommen das nächste Element in der Art und Weisen Sie dachten, zu erhalten: links[i + 1], obwohl die i ein einzigartiges hochgezogen Variable von dieser Schleife ist . Sie können diese i jedoch im Schleifenkörper mithilfe der Variablendeklaration let (nur in ES6 + unterstützt) neu generieren oder einen neuen Funktionsbereich in dieser Schleife verwenden.

let wirkt, als wären wir in einem neuen Bereich, aber nicht. Es hat keine Auswirkungen auf die vorherige i in diesem Beispiel, es wird nur seine Präsenz bei der Blockanweisung ersetzen.

var links = document.querySelectorAll('a[data-lightbox]'); 

for (var i = 0; i < links.length; i++) { 

    let i = i; 

    links[i].addEventListener('click', function() { 
    event.preventDefault(); 
    var imgLink = this.getAttribute('href'); 
    var imgTitle = this.getAttribute('title'); 
    var dataLightbox= this.getAttribute('data-lightbox'); 
    console.log(links[i + 1]); 
    }, false); 
} 

Answer 3

Dies ist ein Bereichsproblem.

können Sie verwenden, binden für das Onclick-Ereignis (die den Umfang Problem zu beheben wäre) zu binden, während das Sie i dem Verfahren senden kann, und Sie können das nächste Element zugreifen i + mit 1

Überprüfen Sie den folgenden Code-Schnipsel

window.onload = function() { 
 
    var links = document.querySelectorAll('a[data-lightbox]'); 
 

 

 
    for (var i = 0; i < links.length; i++) { 
 

 
    links[i].addEventListener('click', onclick.bind(links[i], i)); 
 
    } 
 

 
    function onclick(i) { 
 

 
    var imgLink = this.getAttribute('href'); 
 
    var imgTitle = this.getAttribute('title'); 
 
    var dataLightbox = this.getAttribute('data-lightbox'); 
 
    if(links[i+1]!=undefined){ 
 
    var nextLightbox = links[i + 1].getAttribute('data-lightbox'); 
 
     } 
 

 
    console.log(imgLink); 
 
    console.log(dataLightbox); 
 
    console.log(nextLightbox); 
 
    } 
 
}

<a href="#" data-lightbox=10>link1</a> 
 
<a href="#" data-lightbox=20>link2</a><a href="#" data-lightbox=30>link3</a><a href="#" data-lightbox=40>link4</a><a href="#" data-lightbox=50>link5</a>

Hoffe, dass es

Answer 4

Zusätzlich hilft, was andere hav e erwähnt, ein anderer Weg, um dies zu tun ist mit nextSibling auf this.

var links = document.querySelectorAll('a[data-lightbox]'); 

for (var i = 0; i < links.length; i++) { 

    links[i].addEventListener('click', function() { 
    event.preventDefault(); 
    var imgLink = this.getAttribute('href'); 
    var imgTitle = this.getAttribute('title'); 
    var dataLightbox= this.getAttribute('data-lightbox'); 
    console.log(this.nextElementSibling); 
    }, false); 
}