获取单击元素的索引

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++) {&nbsp; &nbsp; getThumbs[i].onclick = function(index) {&nbsp; &nbsp; &nbsp; &nbsp; return function(e) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //Your current function, where index now is the same as i at the moment of assigning the event listener&nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; }(i);}或者，您可以向每个元素添加一个数据属性，无论是在 html 中（类似于 ），还是从 js 设置它们：data-index="1"var getThumbs = Array.from(document.querySelectorAll('.retail-thumbnail'));for (var i = 0; i < getThumbs.length; i++) {&nbsp; &nbsp; getThumbs[i].dataset.index=i;&nbsp; &nbsp; getThumbs[i].onclick = function(e) {&nbsp; &nbsp; &nbsp; &nbsp; var index=this.dataset.index;&nbsp; &nbsp; &nbsp; &nbsp; //....&nbsp; &nbsp; };}

Answer 2

for (var i=0; i<5; i++){&nbsp; var abc = function(){&nbsp; &nbsp; alert(i) //You can very well access i here&nbsp; }&nbsp;abc();}您几乎可以访问内部，而无需编写额外的代码行。igetThumbs[i].onclickfor (var i = 0; i < getThumbs.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; getThumbs[i].onclick = function(e) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var createSlideshow = document.createElement('div');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var index = i //You can access i due to the lexical scope}

Answer 3

使用匿名函数传递事件和索引。下面是将索引传递给代码中的函数的代码，以及事件。通过使用匿名函数，您可以创建一个将事件作为输入（e）的函数，但也知道索引是什么（请参阅闭包 - 匿名函数从创建时就知道词法范围）。我使用了匿名函数和下面的ES-6胖箭头函数语法（）=>{}。你可以在没有这些的情况下做到这一点，但它看起来会不那么干净。const clicked = (e,i) =>{&nbsp; &nbsp; &nbsp; &nbsp; var createSlideshow = document.createElement('div');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; createSlideshow.setAttribute('class', 'retail-slideshow');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var createClsBtn = document.createElement('div');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; createClsBtn.setAttribute('class', 'close');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; createClsBtn.innerHTML = '&times;';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; createSlideshow.append(createClsBtn);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var slides = '';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const index = getThumbs&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; getThumbs.forEach(gall => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (gall.classList.contains('video-thumb')) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; gall.childNodes.forEach(source => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; source = Array.from(source.src.split('.'));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; source = source[source.length - 3];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; slides += '<div class="retail-slide">\n' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '<iframe src="https://player.vimeo.com/video/' + source + '" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen></iframe>\n' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '</div>\n\n'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; slides += '<img src="' + gall.src + '" class="retail-slide">\n\n'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; slides += '<div id="retail_ss_prev"></div><div id="retail_ss_next"></div>';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; createSlideshow.innerHTML += slides;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var activeModal = document.querySelector('.modal.active');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; activeModal.append(createSlideshow);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var activeCls = document.querySelector('.retail-slideshow > .close');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; activeCls.addEventListener('click', function(e) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; activeCls.parentNode.remove();}var getThumbs = Array.from(document.querySelectorAll('.retail-thumbnail'));&nbsp; &nbsp; for (var i = 0; i < getThumbs.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; getThumbs[i].onclick = (e) =>{clicked(e,i);}&nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; };};