获取单击元素的索引

Question

所以我在JavaScript上还是很新的，我可以做一些基本的东西，但很多，不是那么多。无论如何，我正在尝试创建一个画廊，当单击其中一个元素时，它会打开一个更大的幻灯片。我遇到的问题是我不知道如何找到点击元素的索引。我尝试过谷歌，我甚至看了这里和很多问题的答案，但它们似乎都不适合我的代码。    var getThumbs = Array.from(document.querySelectorAll('.retail-thumbnail'));    for (var i = 0; i < getThumbs.length; i++) {        getThumbs[i].onclick = function(e) {            var createSlideshow = document.createElement('div');            createSlideshow.setAttribute('class', 'retail-slideshow');            var createClsBtn = document.createElement('div');            createClsBtn.setAttribute('class', 'close');            createClsBtn.innerHTML = '&times;';            createSlideshow.append(createClsBtn);            var slides = '';            const index = getThumbs            getThumbs.forEach(gall => {                if (gall.classList.contains('video-thumb')) {                    gall.childNodes.forEach(source => {                            source = Array.from(source.src.split('.'));                            source = source[source.length - 3];                            slides += '<div class="retail-slide">\n' +                                      '<iframe src="https://player.vimeo.com/video/' + source + '" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen></iframe>\n' +                                      '</div>\n\n'                    });                } else {                    slides += '<img src="' + gall.src + '" class="retail-slide">\n\n'                }        };    };};这就是我所拥有的，它写了所有内容，但是当我单击其中一个.store-thumbnail元素时，我无法获取索引。任何帮助都非常感谢。最好在香草JS中。我尽量远离杰奎里

Answer 1

您可以利用闭包。

var getThumbs = Array.from(document.querySelectorAll('.retail-thumbnail'));

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

    getThumbs[i].onclick = function(index) {

        return function(e) {

            //Your current function, where index now is the same as i at the moment of assigning the event listener

        };

    }(i);

}

或者，您可以向每个元素添加一个数据属性，无论是在 html 中（类似于 ），还是从 js 设置它们：data-index="1"

var getThumbs = Array.from(document.querySelectorAll('.retail-thumbnail'));

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

    getThumbs[i].dataset.index=i;

    getThumbs[i].onclick = function(e) {

        var index=this.dataset.index;

        //....

    };

}

Answer 2

for (var i=0; i<5; i++){

  var abc = function(){

    alert(i) //You can very well access i here

  }

 abc();

}

您几乎可以访问内部，而无需编写额外的代码行。igetThumbs[i].onclick

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

        getThumbs[i].onclick = function(e) {

            var createSlideshow = document.createElement('div');

            var index = i //You can access i due to the lexical scope

}

Answer 3

使用匿名函数传递事件和索引。

下面是将索引传递给代码中的函数的代码，以及事件。

通过使用匿名函数，您可以创建一个将事件作为输入（e）的函数，但也知道索引是什么（请参阅闭包 - 匿名函数从创建时就知道词法范围）。

我使用了匿名函数和下面的ES-6胖箭头函数语法（）=>{}。你可以在没有这些的情况下做到这一点，但它看起来会不那么干净。

const clicked = (e,i) =>{

        var createSlideshow = document.createElement('div');

            createSlideshow.setAttribute('class', 'retail-slideshow');

            var createClsBtn = document.createElement('div');

            createClsBtn.setAttribute('class', 'close');

            createClsBtn.innerHTML = '&times;';

            createSlideshow.append(createClsBtn);

            var slides = '';

            const index = getThumbs

            getThumbs.forEach(gall => {

                if (gall.classList.contains('video-thumb')) {

                    gall.childNodes.forEach(source => {

                            source = Array.from(source.src.split('.'));

                            source = source[source.length - 3];

                            slides += '<div class="retail-slide">\n' +

                                      '<iframe src="https://player.vimeo.com/video/' + source + '" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen></iframe>\n' +

                                      '</div>\n\n'

                    });

                } else {

                    slides += '<img src="' + gall.src + '" class="retail-slide">\n\n'

                }

            });

            slides += '<div id="retail_ss_prev"></div><div id="retail_ss_next"></div>';

            createSlideshow.innerHTML += slides;

            var activeModal = document.querySelector('.modal.active');

            activeModal.append(createSlideshow);

            var activeCls = document.querySelector('.retail-slideshow > .close');

            activeCls.addEventListener('click', function(e) {

            activeCls.parentNode.remove();

}

var getThumbs = Array.from(document.querySelectorAll('.retail-thumbnail'));

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

        getThumbs[i].onclick = (e) =>{clicked(e,i);}

        };

    };

};