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

我想获得数据灯箱＆＃39;我当前点击的下一个元素的属性。怎么做？

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是此循环的唯一提升变量。但是，您可以使用i的变量声明（仅在ES6 +中支持）或在该循环内使用新的函数作用域，在循环体中重新生成此let。

let表现得像我们在新的范围内，但不是。在此示例中，它不会影响之前的i，它只会在块语句中替换它的存在。

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

这是一个范围问题。

你可以使用bind（它可以解决范围问题）onclick事件绑定，同时你可以将i发送给方法，你可以使用i + 1访问下一个元素

检查以下代码段

＆＃13;

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

＆＃13;

<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>

＆＃13;

希望有所帮助

Answer 4

除了其他人提到的内容之外，另一种方法是在nextSibling上使用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);
}

如何获得下一个元素＆＃34;这个＆＃34; - 纯粹的javascript

4 个答案: