基于keyup更改跨度文本

Question

我正在尝试更改页面上具有ID与我使用的字段匹配的标记的所有文本。

JS:

$("#name1").keyup(function() {
    var val = $(this).val();
    $("#name2").html(val);
});
$("#regard1").keyup(function() {
    var val = $(this).val();
    $("#regard2").html(val);
});
$("#code1").keyup(function() {
    var val = $(this).val();
    $("#code2").html(val);
});

HTML:

  <input id="name1" type="text" placeholder="A" />
<input id="regard1" type="text" placeholder="B" />
<input id="code1" type="text" placeholder="C" /><br />
<span id="name2">1</span><br />
<span id="code2">2</span><br />
<span id="regard2">3</span><br />
<span id="name2">4</span><br />
<span id="code2">5</span><br />
<span id="regard2">6</span>

但似乎只有第一个实例受到影响。如何命中所有实例？

Answer 1

因为id在同一文档中应该是唯一的，所以应该用classes替换重复的ids，代码就会工作，请查看下面的工作示例。

希望这能有所帮助。

---

$("#name1").keyup(function() {
    var val = $(this).val();
    $(".name2").html(val);
});
$("#regard1").keyup(function() {
    var val = $(this).val();
    $(".regard2").html(val);
});
$("#code1").keyup(function() {
    var val = $(this).val();
    $(".code2").html(val);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="name1" type="text" placeholder="A" />
<input id="regard1" type="text" placeholder="B" />
<input id="code1" type="text" placeholder="C" /><br />
<span class="name2">1</span><br />
<span class="code2">2</span><br />
<span class="regard2">3</span><br />
<span class="name2">4</span><br />
<span class="code2">5</span><br />
<span class="regard2">6</span>

Answer 2

在html中，一个id可以出现一次。因此，不能有两个id相同的元素。要么给这两个元素各自一个唯一的id，要么给它们相同的类名。