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

IDs have to be unique：

id = name [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

我认为问题是当你使用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);

虽然取决于数据的工作方式，但最好不要使用重复的“名称”属性值

Answer 3

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

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

然后你可以像这样添加输入值：

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

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

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

Answer 4

使用class而不是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 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" />

使用.each（）将输入复制到多个div

5 个答案: