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

在html中，id可以使用一次。因此，您不能拥有两个具有相同ID的元素。要么为每个元素赋予一个唯一的id，要么给它们相同的类名。

Answer 2

由于ID在同一文档中应该是唯一的，因此您应该将重复的ids替换为classes并且代码可以正常工作，请查看下面的工作示例。

希望这有帮助。

$("#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>

根据keyup更改跨越文本

2 个答案: