我可以减少这个javascript吗？（多个图像数组，然后单击事件侦听器）

Question

https://jsfiddle.net/mr_antlers/ryLtwcbe/

我把这个放在一起。我简单的图像交换在点击。我已经为要交换的每个人脸元素重复了相同的代码块。所以这个块重复眼睛，然后是鼻子，嘴巴等...

//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";

//Select all elements on the page with the name attribute equal to VCRImage

var 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];

  }

}

我想减少数组和点击侦听器中的重复...

理想情况下，我还希望有一个按钮来切换每个人脸属性。我还没有谈到这一点。随机按钮也会很好。任何有关这些的帮助将不胜感激。

非常感谢您提前获得有关改进此代码的指导。

Answer 1

几个机会：将要素定义为列表使用 动态填充要素值列表new Array(3).fill().map()在图像的包含元素上添加侦听器，而不是图像本身使用数据属性（例如data-index)const features = [&nbsp; {&nbsp; &nbsp; element: document.querySelector('.eyes'),&nbsp; &nbsp; values: new Array(3).fill().map((value, index) => `http://guildofone.com/makeneki-neko/img/SVG/eyes${index}.svg`),&nbsp; },&nbsp; {&nbsp; &nbsp; element: document.querySelector('.noses'),&nbsp; &nbsp; values: new Array(3).fill().map((value, index) => `http://guildofone.com/makeneki-neko/img/SVG/nose${index}.svg`),&nbsp; }];function initialize() {&nbsp; features.forEach(feature => {&nbsp; &nbsp; feature.element.addEventListener('click', () => {&nbsp; &nbsp; &nbsp; const current = parseInt(feature.element.getAttribute('data-index'), 10);&nbsp; &nbsp; &nbsp; const nextIndex = (current + 1) % feature.values.length;&nbsp; &nbsp; &nbsp; feature.element.setAttribute('data-index', nextIndex);&nbsp; &nbsp; &nbsp; updateFeature(feature);&nbsp; &nbsp; });&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; updateFeature(feature);&nbsp; });}function updateFeature(feature) {&nbsp; const index = feature.element.getAttribute('data-index');&nbsp; const img = feature.element.querySelector('img');&nbsp; img.src = feature.values[index];}initialize();<div class="eyes" data-index="0">&nbsp; <img /></div><div class="noses" data-index="0">&nbsp; <img /></div>

Answer 2

只需将所有类似的逻辑组合到一个函数中，不同的部分作为参数传递即可。在我的示例中，我也传入了用于绑定事件的图像和元素 - 函数中的其余实现是相同的。window.onload = function() {&nbsp; &nbsp; //eyes&nbsp; &nbsp; var img_eyes = []&nbsp; &nbsp; img_eyes[0] = "http://guildofone.com/makeneki-neko/img/SVG/eyes0.svg";&nbsp; &nbsp; img_eyes[1] = "http://guildofone.com/makeneki-neko/img/SVG/eyes1.svg";&nbsp; &nbsp; img_eyes[2] = "http://guildofone.com/makeneki-neko/img/SVG/eyes2.svg";&nbsp; &nbsp; //face&nbsp; &nbsp; var img_face = []&nbsp; &nbsp; img_face[0] = "http://guildofone.com/makeneki-neko/img/SVG/face0.svg";&nbsp; &nbsp; img_face[1] = "http://guildofone.com/makeneki-neko/img/SVG/face1.svg";&nbsp; &nbsp; img_face[2] = "http://guildofone.com/makeneki-neko/img/SVG/face2.svg";&nbsp; &nbsp; //build the rest of the images&nbsp; &nbsp; //add the features&nbsp;&nbsp; &nbsp; addFeature( document.querySelectorAll( "[name=eyes]" ), img_eyes )&nbsp;&nbsp; &nbsp; addFeature( document.querySelectorAll( "[name=face]" ), img_face )&nbsp;}function addFeature( features,&nbsp; imgs ) {&nbsp; &nbsp; //add the feature&nbsp;&nbsp; &nbsp; for( var i=0; i < features.length; i++ ) {&nbsp; &nbsp; &nbsp; &nbsp; var feature =&nbsp; features[i];&nbsp; &nbsp; &nbsp; &nbsp; feature.addEventListener( "click", featureClicked(), false )&nbsp; &nbsp; }&nbsp; &nbsp; function featureClicked() {&nbsp; &nbsp; &nbsp; &nbsp; let counter = 0;&nbsp; &nbsp; &nbsp; &nbsp; return function( event ) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; counter++;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.src = imgs[counter % imgs.length];&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }}