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

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

1 个答案: