Question

 <span>This Changes as You Type in Input1</span><br>

 <input type="text" id="input1"><br><br>

 <span>This Changes as You Type Type in Input2</span><br>

 <input type="text" id="input2"><br><br>

当用户在输入文本中输入内容时，我希望jquery在上面搜索span标签，并在用户输入时动态更改它。我只是在这个例子中使用了更改，因为如果我使用按键，它会遗漏最后一个按键...

 //my jquery attempt that's not working
 $('#input1').change(function() {
 $(this).closest('span').html($(this).val()    
 });

想要知道我是否可以使用类有效地编码，而不是为每个id重复此更改函数。例如，如果我可以使它成为一个类，它会改变它上面最近的标签上的文本吗？

 //Like this?
 $('.inputclass').change(function() {
 $(this).closest('span').html($(this).val()    
 });

Answer 1

问题是javascript格式不正确。您错过了)

上的结束.html()

 $(this).closest('span').html($(this).val()

到

 $(this).closest('span').html($(this).val());

Answer 2

虽然.closest()可以正常工作，但我建议您在html中更好地构建以下内容。

<div>
    <span>This Changes as You Type in Input1</span><br>
    <input type="text" id="input1"><br><br>
</div>

<div>
    <span>This Changes as You Type in Input2</span><br>
    <input type="text" id="input2"><br><br>
</div>

在父元素中隐藏您的input及其对应的span。显然，使用类，因为它可以避免代码中的冗余。

执行此操作后，.closest()可以正常使用，但您最好使用.siblings()。

<强> jQuery的：

你错过了)的右大括号.html()，你的行必须是这样的，

$(this).closest('span').html($(this).val())

jquery / js：在输入按键上动态更改span文本

2 个答案: