2

我想将用户的输入复制到多个 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>

此致，

菲利克斯

4

5 回答 5

3

ID 必须是唯一的：

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 更简单。
于 2011-12-15T10:12:10.240 回答
2

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

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

我个人会去这个...

<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);

尽管取决于您的数据的工作方式，最好不要有重复的“名称”属性值

于 2011-12-15T10:11:32.013 回答
2

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

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

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

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

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

$("#someText").blur(function() { $('.copy').html($(this).val()); });
于 2011-12-15T10:15:37.127 回答
2

使用类而不是 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>
于 2011-12-15T10:15:37.490 回答
0

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" />
于 2012-03-14T11:48:59.950 回答