Несколько входов, которые заполняют отдельные элементы Div

avatar
johnny555
8 апреля 2018 в 07:21
49
3
2

В JQuery это позволяет использовать один ввод, который заполняет отдельный элемент div:

var div = $('div')[0];

$('input').bind('keyup change', function() {
  div.innerHTML = this.value;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>Enter text here: <br><input></form>
<div></div>

Но затем, когда я пытаюсь добавить второй ввод, который заполняет другой отдельный div, я не могу заставить его работать. Я также не знаю, как дать идентификатор div и назначить этот идентификатор в javascript. Вот что я пробовал:

var div = $('#header')[0];

$('input').bind('keyup change', function() {
  div.innerHTML = this.value;
});

var div = $('#subHeader')[0];

$('input').bind('keyup change', function() {
  div.innerHTML = this.value;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>Enter text here: <br><input></form>
<div id="header"></div>
<br><br>
<form>Enter text here: <br><input></form>
<div id="subHheader"></div>

Как я могу создать несколько входов, каждый из которых будет заполнять свой отдельный div с идентификатором?

Источник

Ответы (3)

avatar
Murtaza Fakhruddin
8 апреля 2018 в 07:43
0

Вы также можете попробовать это, назначив идентификатор своим входам,

<html>

<head>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
    <script>
        $(document).ready(function(){
            var div1 = $('#header')[0];

            $('#text1').bind('keyup change', function() {
                div1.innerHTML = this.value;
            }); 

            var div2 = $('#subHeader')[0];

            $('#text2').bind('keyup change', function() {
                div2.innerHTML = this.value;
            });        
         })      
    </script>
</head>    
<body>
        <form>Enter text here: <br><input id="text1">
        <div id="header"></div>
        <br><br>
        Enter text here: <br><input id="text2">
        <div id="subHeader"></div>
        </form>
</body>

</html>
avatar
Jason Spradlin
8 апреля 2018 в 07:28
3

$('input') — это вызов jQuery, который возвращает массив всех тегов на странице. Вы должны использовать классы или идентификаторы, чтобы различать каждый div и каждый input.

ТАКЖЕ, у вас опечатка в идентификаторе подзаголовка (он говорит subHheader).

<form>Enter text here: <br><input id="headerInput"></form>
<div id="header"></div>
<br><br>
<form>Enter text here: <br><input id="subHeaderInput"></form>
<div id="subHeader"></div>
var $divA = $('#header'); 

$('#headerInput').bind('keyup change', function() {
    $divA.html(this.value);
});

var $divB = $('#subHeader');

$('#subHeaderInput').bind('keyup change', function() {
    $divB.html(this.value);
});
johnny555
8 апреля 2018 в 07:46
0

Все еще не могу заставить его работать. Это работает для вас в jsfiddle?

Jason Spradlin
8 апреля 2018 в 07:56
0

делает сейчас. (пришлось внести изменения, которые показаны выше) jsfiddle.net/xLrbmgky/2

avatar
Octave W
8 апреля 2018 в 07:25
2

Вы можете указать свой <input> с идентификатором (возможно, тем же самым), чтобы вы могли использовать jQuery для фактического запроса этого

<form>Enter text here: <br><input id="subHheaderInput"></form>
<div id="subHheader"></div>



var div = $('#subHeader')[0];

$('#subHeaderInput').bind('keyup change', function() {
div.innerHTML = this.value;
});
Jason Spradlin
8 апреля 2018 в 07:28
0

опечатки в html. subHheader и subHheaderInput вместо subHeader и subHeaderInput