Question

使用JQuery，这允许单个输入填充单独的div：

＆＃13;

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

＆＃13;

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

＆＃13;

但是当我尝试添加第二个输入来填充另一个单独的div时，我无法让它工作。我也不知道如何给div一个ID并在javascript中分配该ID。以下是我尝试过的内容：

＆＃13;

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

＆＃13;

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

＆＃13;

如何创建多个输入，每个输入都填充自己的具有ID的单独div？

Answer 1

$('input')是一个jQuery调用，它返回页面上所有标记的数组。您应该使用类或ID来区分每个div和每个input。

此外，您的subHeader ID中有一个拼写错误（显示为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);
});

Answer 2

您可以使用id（可能是同一个）指定<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;
});

Answer 3

您也可以通过为输入分配ID来尝试此操作，

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

填充单独Div的多个输入

3 个答案: