首頁猿問獲取單擊元素的索引

獲取單擊元素的索引

JavaScript

BIG陽 2022-09-16 20:56:04

所以我在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 = '×'; 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中。我盡量遠離杰奎里

查看完整描述

3 回答

互換的青春

TA貢獻1797條經驗獲得超6個贊

您可以利用閉包。

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;

//....

};

}

反對回復 2022-09-16

四季花海

TA貢獻1811條經驗獲得超5個贊

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

}

反對回復 2022-09-16

一只名叫tom的貓

TA貢獻1906條經驗獲得超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 = '×';

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

};

反對回復 2022-09-16

3 回答
0 關注
122 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

獲取單擊元素的索引

獲取單擊元素的索引

3 回答

添加回答