Question

我一直在为自己构建一个独立的Web应用程序来学习asp.net MVC4，并且这样做了解HTML 5，CSS和JavaScript的更多信息。毋庸置疑，我已经学到了很多东西，并意识到他们需要学习更多东西。在我提出任何问题之前，我会彻底搜索这个网站和其他人试图找到自己的东西，因为我发现我做得更好。

我的问题只是试图找到一种方法来简化我的JavaScript代码，如果可能的话。我目前不是在寻找JQuery，而是将来会对它进行研究。现在严格来说是JavaScript。

以下是我想要截断的JavaScript代码的一部分。

    window.addEventListener('load', tap);

    function tap() {
        var elements = document.getElementByClassName('tap');
            for ( var i = elements.length - 1; i >= 0; --i)
            {
                elements[i].innerHTML = '<img src="/Content/Images/tap_icon.jpg>")';
            }
        }

这段代码很适合我打算做的事情，它改变了＆＃39; tap＆＃39;的元素类。无论有多少元素具有类名，都可以使用特定图像。

问题是我有8个不同的类，我正在做这个，每个图像需要显示一个。下面显示的是2个功能。

    window.addEventListener('load', tap);

    function tap() {
        var elements = document.getElementsByClassName('tap');
            for ( var i = elements.length - 1; i >= 0; --i)
            {
                elements[i].innerHTML = '<img src="/Content/Images/tap_icon.jpg">';
            }
        }

    window.addEventListener('load', redMana);

    function redMana() {
        var elements = document.getElementsByClassName('red');
            for (var i = elements.length - 1; i >= 0; --i) 
            {
                elements[i].innerHTML = '<img src="/Content/Images/Red_Mana.jpg">';
            }
        }

有没有办法将这些全部捆绑到一个函数中，或者最好将它们分开以保持可读性，并且如果为添加到应用程序的图像/新类创建新文件名，则更容易更新。

任何可以指向正确方向的东西都会非常感激。谢谢大家的知识和帮助。

编辑：

对不起，我这么晚才回来。我正在搬家并开始一份新工作。

我更新了我的JavaScript文件以反映所提供的答案，但是当我运行应用程序时，只有第一个调用触发。

这是完整的脚本，现在我需要添加更多的电话。

    window.addEventListener('load', setImage);

    function setImage(className, imageName) {
        var elements = document.getElementByClassName(className);

        for (var i = elements.length - 1; i >= 0; --i) {
            elements[i].innerHTML = '<img src="/Content/Images/' + imageName + '.jpg">';
    }

    setImage('tap', 'tap_icon');
    setImage('c2', '2cmana');
    setImage('red', 'Red_Mana');
}

当我运行应用程序时，第一次调用

    setImage('tap', 'tap_icon');

点火，但接下来的电话什么都不做。我不知道我错过了什么。

Answer 1

为了不重复相同的代码，你可以在函数中添加参数，假设它具有不同输入的相同函数：

 //For Example:
 function setImage(className, imageName) {
    var elements = document.getElementsByClassName(className);
    for (var i = elements.length - 1; i >= 0; --i) 
    {
        elements[i].innerHTML = '<img src="/Content/Images/' + imageName + '.jpg">';
    }
 }

然后你可以这样调用这个函数：

setImage('red', 'Red_Mana');
setImage('tap', 'tap_icon');

Answer 2

既然你提到你展望未来我就是ES6功能的答案。

为简化起见，您可以抽象所有类似的代码并构建基于配置的代码，如下所示：

const baseImgPath = "/Content/Images/",
      classImageMap = [
        { className: 'tap', imageName: 'tap_icon.jpg' },
        { className: 'red', imageName: 'Red_Mana.jpg' }
      ];

window.addEventListener('load', onWindowLoad);

function onWindowLoad() {
  classImageMap.forEach(setImageToClass);
}

function setImageToClass(mapping) {
  let { className, imageName } = mapping;
  document
   .getElementsByClassName(className)
   .forEach(elem => elem.innerHTML = `<img src="${baseImgPath+imageName}"/>` );
}

使用javascript更改多个不同的类

2 个答案: