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

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”事件调用。

经过长时间的搜索，我在 stackoverflow 的 reply 中找到了这些函数的模式，它们正是我所需要的。为此，我非常感谢 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);
    });
});