填充单独 div 的多个输入

使用 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 一个 ID 并在 javascript 中分配该 ID。这是我尝试过的：

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>

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

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

此外，您的副标题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);
});

你可以用一个id(可能是同一个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;
});

您也可以通过将 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>

相关内容

最新更新

热门标签：