只有一個功能而不是很多看起來相同？ Bonjour！

Question

Bonjour！這裏是我的問題，我使用的是兩種「短」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」事件調用。

經過長時間的搜索後，我發現這些函數的模式在0123overflow中是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); 
    }); 
});