首頁猿問我可以減少這個javascript...

我可以減少這個javascript嗎？（多個圖像數組，然后單擊事件偵聽器）

JavaScript

元芳怎么了 2022-08-04 09:43:55

https://jsfiddle.net/mr_antlers/ryLtwcbe/我把這個放在一起。我簡單的圖像交換在點擊。我已經為要交換的每個人臉元素重復了相同的代碼塊。所以這個塊重復眼睛，然后是鼻子，嘴巴等...//eyesvar img_eyes = []img_eyes[0] = "http://guildofone.com/makeneki-neko/img/SVG/eyes0.svg";img_eyes[1] = "http://guildofone.com/makeneki-neko/img/SVG/eyes1.svg";img_eyes[2] = "http://guildofone.com/makeneki-neko/img/SVG/eyes2.svg";//Select all elements on the page with the name attribute equal to VCRImagevar eyes = document.querySelectorAll('[name=eyes]');for(var i=0; i < eyes.length; i++){ var eyes = eyes[i]; eyes.addEventListener('click', eyesClicked(), false);}function eyesClicked(){ var counter = 0; return function(event) { counter++; this.src = img_eyes[counter % img_eyes.length]; }}我想減少數組和點擊偵聽器中的重復...理想情況下，我還希望有一個按鈕來切換每個人臉屬性。我還沒有談到這一點。隨機按鈕也會很好。任何有關這些的幫助將不勝感激。非常感謝您提前獲得有關改進此代碼的指導。

查看完整描述

2 回答

白衣非少年

TA貢獻1155條經驗獲得超0個贊

幾個機會：

將要素定義為列表
使用動態填充要素值列表new Array(3).fill().map()
在圖像的包含元素上添加偵聽器，而不是圖像本身
使用數據屬性（例如data-index)

const features = [

{

element: document.querySelector('.eyes'),

values: new Array(3).fill().map((value, index) => `http://guildofone.com/makeneki-neko/img/SVG/eyes${index}.svg`),

{

element: document.querySelector('.noses'),

values: new Array(3).fill().map((value, index) => `http://guildofone.com/makeneki-neko/img/SVG/nose${index}.svg`),

}

];

function initialize() {

features.forEach(feature => {

feature.element.addEventListener('click', () => {

const current = parseInt(feature.element.getAttribute('data-index'), 10);

const nextIndex = (current + 1) % feature.values.length;

feature.element.setAttribute('data-index', nextIndex);

updateFeature(feature);

});

updateFeature(feature);

});

}

function updateFeature(feature) {

const index = feature.element.getAttribute('data-index');

const img = feature.element.querySelector('img');

img.src = feature.values[index];

}

initialize();

<img />

</div>

<img />

</div>

反對回復 2022-08-04

一只萌萌小番薯

TA貢獻1795條經驗獲得超7個贊

只需將所有類似的邏輯組合到一個函數中，不同的部分作為參數傳遞即可。在我的示例中，我也傳入了用于綁定事件的圖像和元素 - 函數中的其余實現是相同的。

window.onload = function() {

//eyes

var img_eyes = []

img_eyes[0] = "http://guildofone.com/makeneki-neko/img/SVG/eyes0.svg";

img_eyes[1] = "http://guildofone.com/makeneki-neko/img/SVG/eyes1.svg";

img_eyes[2] = "http://guildofone.com/makeneki-neko/img/SVG/eyes2.svg";

//face

var img_face = []

img_face[0] = "http://guildofone.com/makeneki-neko/img/SVG/face0.svg";

img_face[1] = "http://guildofone.com/makeneki-neko/img/SVG/face1.svg";

img_face[2] = "http://guildofone.com/makeneki-neko/img/SVG/face2.svg";

//build the rest of the images

//add the features

addFeature( document.querySelectorAll( "[name=eyes]" ), img_eyes )

addFeature( document.querySelectorAll( "[name=face]" ), img_face )

}

function addFeature( features, imgs ) {

//add the feature

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

var feature = features[i];

feature.addEventListener( "click", featureClicked(), false )

}

function featureClicked() {

let counter = 0;

return function( event ) {

counter++;

this.src = imgs[counter % imgs.length];

}

反對回復 2022-08-04

2 回答
0 關注
119 瀏覽

關注

添加回答

舉報

0/150

提交

取消

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

熱搜

最近搜索清空

我可以減少這個javascript嗎？（多個圖像數組，然后單擊事件偵聽器）

我可以減少這個javascript嗎？（多個圖像數組，然后單擊事件偵聽器）

2 回答

添加回答

我可以減少這個javascript嗎？（多個圖像數組，然后單擊事件偵聽器）

我可以減少這個javascript嗎？（多個圖像數組，然后單擊事件偵聽器）