javascript - 使用javascript更改多个不同的类

Question

我一直在为自己构建一个独立的 Web 应用程序以了解 asp.net MVC4，并在此过程中学习了更多有关 HTML 5、CSS 和 JavaScript 的知识。不用说，我学到了很多东西，并且意识到他们还有很多东西要学。然而，在我提出任何问题之前，我会彻底搜索这个网站和其他网站，尝试自己找到一些东西，因为我发现自己在实践中学得更好。

我的问题是尽可能找到一种方法来简化我的 JavaScript 代码。我现在不是在寻找 JQuery，但将来会研究它。现在严格使用 JavaScript。

这是我希望 chop 的 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>")';
            }
        }

此代码非常适合我的预期用途，即无论有多少元素具有类名，都将“tap”的元素类更改为特定图像。

问题是我有 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 文件以反射(reflect)所提供的答案，但是当我运行该应用程序时，只有第一个调用会触发。

这是现在我需要添加更多调用的完整脚本。

    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');