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

Question

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];  }}我想减少数组和点击侦听器中的重复...理想情况下，我还希望有一个按钮来切换每个人脸属性。我还没有谈到这一点。随机按钮也会很好。任何有关这些的帮助将不胜感激。非常感谢您提前获得有关改进此代码的指导。

Answer 1

几个机会：

1. 将要素定义为列表

2. 使用 动态填充要素值列表new Array(3).fill().map()

3. 在图像的包含元素上添加侦听器，而不是图像本身

4. 使用数据属性（例如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>

Answer 2

只需将所有类似的逻辑组合到一个函数中，不同的部分作为参数传递即可。在我的示例中，我也传入了用于绑定事件的图像和元素 - 函数中的其余实现是相同的。

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

        }

    }

}