javascript - 只有一个功能而不是许多看起来相同的功能？

Question

您好!这是我的问题，我正在使用两种“类型”的 JS 短函数(每个函数 5 行代码)，但我必须制作，比方说，每种类型大约 10 行。总共有 100 行代码，非常长……所以我想知道是否有一种简单且非常短的方法来实现它。我对 javascript 知之甚少，我喜欢粗略地理解我写的东西。 (如果可能的话，避免使用 JQ，我完全不明白这个词!)以下是功能:

    function typedepolice() {
    var nodes = document.getElementById('stripid').childNodes;
    var nompolice = document.Selections.police.options[document.Selections.police.selectedIndex].value;
    for(var i=0; i<nodes.length; i++) {
         if (nodes[i].nodeName.toLowerCase() == 'div') {
        nodes[i].style.fontFamily = document.Selections.police.options[document.Selections.police.selectedIndex].value;
         }
    }
}

html 调用:...<select name="police" id="police" size="1" onchange="typedepolice()">...

function colbandeau() {
    var nodes = document.getElementById('stripid').childNodes;
    var colorFmsg = document.getElementById("colorFmsg").value;
        for(var i=0; i<nodes.length; i++) {
         if (nodes[i].nodeName.toLowerCase() == 'div') {
        nodes[i].style.background = '#' + document.getElementById("colorFmsg").value;
         }
    }
}

html 调用:...<input id="colorFmsg" class="color3" value="FFFFFF" size="5" onchange="colbandeau()">...

第一个是指下拉选择框的一个选中的选项。第二个是用JSColor选择颜色，这是一个选择颜色的JS插件。如您所见，它们旨在动态更改 ID 为“stripid”的一个元素的多个 div 子元素的 CSS 属性，并由“onchange”事件调用。

经过长时间的搜索，我在 reply 中找到了这些函数的模式。在 stackoverflow 中，它们正是我所需要的。为此，我非常感谢 Vijay Agrawal，因为它将大大改进我的网页。

注意:别害怕，“警察”在法语中的意思是“字体”:)

如果有人能帮助我，那就太好了!

Answer 1

您可以创建一个函数来设置stripid 子节点

function setNodeStyle(value, style) {
    var nodes = document.getElementById('stripid').childNodes;
    for (var i=0; i<nodes.length; i++) {
        if (nodes[i].nodeName.toLowerCase() == 'div') {
            nodes[i].style[style] = value;
        }
    }
}

然后就可以在其他函数中调用了:

function colbandeau() {
    setNodeStyle(document.getElementById("colorFmsg").value, "background");
}

这已经为您节省了不少。

您可以通过设置包含要成为的值的属性来进一步改进这一点。入门指南:

<input class="color3 changer" value="FFFFFF" size="5" data-style="background">

Array.prototype.forEach.call(document.querySelector(".changer"), function (el) {
    el.addEventListener("change", function () {
        setNodeStyles(this.value, this.dataset.style);
    });
});