如何「這個」後得到下一個元素 - 我純JavaScript

Question

有代碼：

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); 
} 

我想「數據收藏夾」屬性明年我現在點擊的元素。怎麼做？

Answer 1

使用IIFE可以做的伎倆，以保持i範圍

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

你可以嘗試讓你的思維方式的下一個元素：links[i + 1]，雖然i是一個獨特的吊裝變量通過這個循環。但是，可以使用變量聲明let（僅在ES6 +中受支持）或在該循環內使用新的函數作用域，在循環體中重新生成此i。

let就像我們在一個新的範圍，但沒有。在這個例子中它不會影響以前的i，它只會替換它在block語句中的存在。

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

這是範圍問題。

可以使用綁定（這將解決範圍的問題）的onclick事件綁定，而這一點，你可以把我的方法，你可以用我+ 1

檢查下面的代碼片斷訪問下一個元素

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>

希望它可以幫助

Answer 4

除了別人甲肝另外提到的另一種方法是在this上使用nextSibling。

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); 
}