1

ボンジュール！これが私の質問です。私は2つの「種類」の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()">...

最初のものは、ドロップダウン選択ボックスの選択されたオプションを参照します。2つ目は、色を選択するJSプラグインであるJSColorで選択した色です。ご覧のとおり、これらは、ID が「stripid」であり、「onchange」イベントによって呼び出される 1 つの要素の多数の div 子の CSS プロパティを動的に変更することを目的としています。

長い検索の後、スタックオーバーフローの返信でこれらの関数のパターンを見つけました。それらはまさに私が必要としていたものです。これについては、Vijay Agrawal に大いに感謝します。これにより、私の Web ページが大幅に改善されるからです。

NB : 恐れるな、"police" はフランス語で "フォント" を意味する :)

誰かが私を助けることができれば、それは素晴らしいことです!

4

1 に答える 1

0

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);
    });
});
于 2013-06-05T05:14:19.687 に答える