скопировать ввод с помощью .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>

С наилучшими пожеланиями,

Felix

Answer 1

Идентификаторы должны быть уникальными :

id = name [CS]
Этот атрибут присваивает имя элементу. Это имя должно быть уникальным в документе.

Большинство браузеров возвращают первый элемент документа с заданным идентификатором, хотя поведение не определено.

Вместо этого используйте классы, если вы хотите выбрать несколько элементов:

HTML:

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

JavaScript:

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

Некоторые другие пункты:

• Вам не нужно использовать .each, методы установки обычно всегда применяются ко всем элементам набора.
• Внутри обработчика событий this относится к элементу, с которым связан обработчик. Вам не нужно снова использовать селектор.
• Если у вас уже есть ссылка на элемент DOM, часто проще просто получить доступ к одному из его свойств напрямую, чем переходить через jQuery.

Answer 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>

Answer 3

Я бы не подумал, что это не получится, но вы все равно должны использовать здесь класс вместо идентификаторов.

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

Затем вы можете добавить значение из ввода следующим образом:

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

Обратите внимание, что я изменил ваш пример, чтобы использовать текстовую функцию вместо .html. Поскольку вы связываетесь с событием keyup, есть вероятность, что , если пользователь введет HTML, HTML-код, вставленный до завершения тега, будет нарушен. Если вы хотите принять HTML, вам следует вместо этого связать с событием размытия:

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

Answer 4

Мне кажется, проблема в том, что 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" />