使用 .each() 将输入复制到多个 div

Question

我想将用户的输入复制到多个div。 我尝试使用 .each() 因为我想将它应用于后面的每个 div。 到目前为止我已经编写了这段代码，但它仅适用于第一个 div。

<input type="text" name="someText" id="someText">



$("#someText").keyup(function() {
    var x = $("#someText").val();
    $("#copy").each(function () {
        $(this).html(x);
    });
});


<div id="copy"></div>
<div id="copy"></div>

最好的问候，

菲利克斯

Answer 1

ID 必须是唯一的：

id = 姓名 [CS]
该属性为元素指定一个名称。该名称在文档中必须是唯一的。

大多数浏览器将返回具有给定 ID 的文档的第一个元素，但行为未指定。

如果您想选择多个元素，请使用类：

HTML：

<div class="copy"></div>
<div class="copy"></div>

JavaScript：

$("#someText").keyup(function() {
    $(".copy").text(this.value);
});

其他一些要点：

• 您不必使用 .each，setter 方法通常始终应用于集合中的所有元素。
• 在事件处理程序内部，this 指的是处理程序绑定到的元素。您不必再次使用选择器。
• 如果您已经拥有对 DOM 元素的引用，则直接访问其属性之一而不是通过 jQuery 通常会更简单。

Answer 2

我不认为这会失败，但你仍然应该在这里使用 class 而不是 ids 。

<div class="copy"></div>
<div class="copy"></div>

然后，您可以像这样添加输入中的值：

$("#someText").keyup(function() { $('.copy').text($(this).val()); });

请注意，我更改了您的示例以使用 text 函数而不是 .html 函数。因为您绑定到 keyup 事件，所以如果用户输入 HTML，您在标记完成之前插入的 HTML 很可能会被破坏。如果你想接受 HTML，你应该绑定到模糊事件：

$("#someText").blur(function() { $('.copy').html($(this).val()); });

Answer 3

使用类而不是 ID。问题解决了:-)

<input type="text" name="someText" id="someText">

<script>

    $("#someText").keyup(function() {
        var x = $("#someText").val();
        $(".copy").each(function () {
            $(this).html(x);
        });
    });
</script>

<div class="copy"></div>
<div class="copy"></div>

Answer 4

我认为问题在于，当您使用 ID 选择器时，JQuery 仅获取第一个实例。

如果您分配一个班级，它应该可以工作。

就我个人而言，我会这样做...

<input type="text" name="someText" id="someText">

$("#someText").keyup(function() {
    var x = $(this).val();
    $(".copy").html(x);
});

<div class="copy"></div>
<div class="copy"></div>

或者您可以像这样使用 name=copy 和选择器...

$("[name=copy]").html(x);

尽管根据您的数据的工作方式，最好不要有重复的“name”属性值

Answer 5

JavaScript

<script type="text/javascript" charset="utf-8">

function getID(obj) {   
   //alert(obj);
   //for text 1 
   $("#t1").val(obj);
}
</script>

Html

<td onClick="getID('${vusers.id}');" id="vid">
   Click on this text
</td>

<input type="text" size=10 id="t1" />