javascript - 对参数化 HTML 元素访问处理的建议

Question

我希望能够通过 Javascript 代码参数化处理一些 HTML 元素。更具体地说，我在这种格式的 HTML 元素列表的每个节点中都有一些“Input.Slider”元素：

<ul id="external">
            <li href="#" id="item" data-duration="3600" class="list-group-item list-group-item-action list-group-item-primary"
                onmouseover="SetDuration(),drag()" onclick="ShowDuration()">
                <script>
                    function SetDuration() {
                        var value = document.getElementById('myRange').value;
                        value = value * 30;
                        document.getElementById('item').setAttribute("data-duration", value);
                    }
                </script>
                <div draggable="true" ondragstart="dragstart_handler(event)" data-duration="30"><h5 id="Riders"> Riders</h5></div><p id="duration">Durata(minuti): <span id="demo"></span></p><div class="slidecontainer">
                    <input type="range" min="0" max="240" value="60" step="30" class="slider" id="myRange">
                </div>
            </li>

            <li..    </li>
            <li..    </li>

                                        

我得到了许多以这种方式单独处理每个 Slider 组件视图的函数：

function ShowDuration() {
    var htmlShow = document.getElementById("myRange");
    var htmlShow1 = document.getElementById("duration");
    if (htmlShow.style.display === "none") {
        htmlShow.style.display = "block";
        htmlShow1.style.display = "block";
    } else {
        htmlShow.style.display = "none";
        htmlShow1.style.display = "none";
    }
}

function ShowDuration1() {
    var htmlShow = document.getElementById("myRange1");
    var htmlShow1 = document.getElementById("duration1");
    if (htmlShow.style.display === "none") {
        htmlShow.style.display = "block";
        htmlShow1.style.display = "block";
    } else {
        htmlShow.style.display = "none";
        htmlShow1.style.display = "none";
    }
}

function ShowDuration2() {..

我想知道是否有可能创建一个脚本来处理每个 Slider 组件视图作为“节点列表”访问的结果。我知道 JS 中没有关于“Collections.lists”的内容，我尝试使用数组但没有好的结果，因为我必须处理非固定长度的元素列表。不久前我开始用 JS 编程，因此我没有太多的想法可以花在上面。一如既往，任何关于它的建议都值得赞赏。感谢大家。

卢卡

标签： javascripthtml