我可以减少这个javascript吗？(多个图像数组和点击事件监听器)

Question

https:/jsfiddle.netmr_antlersryLtwcbe。

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

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

只要把所有相似的逻辑组合成一个函数，不同的部分作为参数传入。在我的例子中，我传递了图像和元素来绑定一个事件 - 其余的函数内的实现是一样的。

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

}

Answer 2

有几个机会。

1. 将特征定义为一个列表
2. 动态填充特征值列表，使用 new Array(3).fill().map()
3. 在图片的包含元素上添加一个监听器，而不是图片本身。
4. 使用数据属性(例如：)维持DOM元素上当前索引的状态。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();

<div class="eyes" data-index="0">
  <img />
</div>
<div class="noses" data-index="0">
  <img />
</div>