Question

我正在设计一个使用javascript的HTML页面。我试图让页面的多个部分显示用户选择的单位。我有一个输入字段说：

    Length Units: <input id="lengthunits" size="7" onblur="updateunits();"></input>

然后我在页面中有多个我想要显示单位的地方。例如，我可能有以下字段：

    Dimension 1 (<span id="dim1"></span>): <input id="dimension1"></input>

然后在updateunits函数中我有：

    function updateunits() {
    document.getElementById("dim1").innerHTML=document.getElementById("lengthunits").value;
    }

这很好用，但我必须在函数中添加一行代码，并使用单独的id，用于页面中我希望显示长度单位的任何位置。我想知道是否有更容易/更好的方法。任何帮助将不胜感激。

Answer 1

使用课程代替ID：

<input id="lengthunits" size="7" onblur="updateunits();"></input>
<span class="dim"></span>
<span class="dim"></span>
<span class="dim"></span>

使用getElementsByClassname获取它们，循环遍历它们并执行您的操作：

function updateunits() {
    var list = document.getElementsByClassName("dim");
    for (var i = 0; i < list.length; i++) {
        list[i].innerHTML = document.getElementById("lengthunits").value;
    }
}

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

Answer 2

有几个选择。我假设你对jQuery之类的东西不感兴趣，因为你上面没有使用它。

如此简单的JS解决方案

使用班级

为每个应该更新的元素提供一个类，例如“updateable”

function updateUnits() {
    var val = document.getElementById("lengthunits").value;
    var elements = document.getElementsByClassName("updateable");
    for (var i = 0; i < elements.length; i++)
        elements[i].innerHTML = document.getElementById("lengthunits").value;
}

CodePen：http://codepen.io/anon/pen/qOEjeb?editors=101

全局变量

这种方法可以保持你的html清洁，但我会说它维护起来有点困难。

function updateUnits() {
    elements = [document.getElementById("id1"), document.getElementById("id2")]
    var val = document.getElementById("lengthunits").value;
    for (var i = 0; i < elements.length; i++)
        elements[i].innerHTML = document.getElementById("lengthunits").value;
}

CodePen http://codepen.io/anon/pen/OyPgKz

这一切都是一样的，它只是关于如何指定要更新的实体。一旦你将它们放在一个数组中，代码就非常简单了。

使用一个功能编辑多个元素

2 个答案:

使用班级

全局变量