Question

我试图这样做，当有人使用输入时，会显示与其对应的文字。

<div class="content1" style="display: block;">Content 1</div>
<div class="content2" style="display: none;">Content 2</div>
<div class="content3" style="display: none;">Content 3</div>
<div class="content4" style="display: none;">Content 4</div>

<ul class="addReview">
        <li><p>Input 1</p><input type="text" name="input1" value="" id="input1" autocomplete="off" maxlength="2"  /></li>
        <li><p>Input 2</p><input type="text" name="input2" value="" id="input2" autocomplete="off" maxlength="2"  /></li>
        <li><p>Input 3</p><input type="text" name="input3" value="" id="input3" autocomplete="off" maxlength="2"  /></li>
        <li><p>Input 4</p><input type="text" name="input4" value="" id="input4" autocomplete="off" maxlength="2"  /></li>
    </ul>

我会为每个输入执行一个键盘功能，还是有办法制作一个键盘功能？

Answer 1

这应该针对您当前的标记：

$('.addReview input[type="text"]').keyup(function() {
   $('div[class^="content"]').hide();
   $('div.' + this.id.replace(/input/, "content")).show();
});

演示：http://jsfiddle.net/WD3CU/

但如果你给div一个普通的类和不同的id，它会更整洁。例如，如果所有div都有“content1”类和“content1”形式的id，那么你可以这样做：

$('.addReview input[type="text"]').keyup(function() {
   $('div.content').hide();
   $('#' + this.id.replace(/input/, "content")).show();
});

看起来相似，但更强大（我为你当前的html做的方式可能会破坏，如果你给div添加额外的类）。

包含我建议的标记更改的演示：http://jsfiddle.net/WD3CU/1/

此外，在我看来，使用.focus()事件而不是.keyup()更有意义，因此只要用户点击或标记其中一个输入，就会显示相应的div

Answer 2

你必须绑定到像这样的公共选择器

$('.addReview input:text').keyup(function() { });

demo

或者像这样的类选择器

$('.addReview .mytextboxclass').keyup(function() { });

demo

或nnnnnn's answer

中的属性选择器

$('.addReview input[type="text"]').keyup(function() { });

demo

Answer 3

您必须稍微修改HTML架构。将其更改为：

<div class="content" id="content_1" style="display: none;">Content 1</div>
<div class="content" id="content_2" style="display: none;">Content 2</div>
<div class="content" id="content_3" style="display: none;">Content 3</div>
<div class="content" id="content_4" style="display: none;">Content 4</div>

<ul class="addReview">
    <li><p>Input 1</p><input type="text" class="input" name="input_1" value="" id="input_1" autocomplete="off" maxlength="2"  /></li>
    <li><p>Input 2</p><input type="text" class="input" name="input_2" value="" id="input_2" autocomplete="off" maxlength="2"  /></li>
    <li><p>Input 3</p><input type="text" class="input" name="input_3" value="" id="input_3" autocomplete="off" maxlength="2"  /></li>
    <li><p>Input 4</p><input type="text" class="input" name="input_4" value="" id="input_4" autocomplete="off" maxlength="2"  /></li>
</ul>

然后，您可以使用以下jQuery代码来实现您要执行的操作：

$(".input").keyup(function() {
    var curId = this.id.split("_")[1];
    $("#content_"+curId).html($(this).val());
    $("#content_"+curId).show();
});

工作JSFiddle demo。

Jquery keyup多个输入

3 个答案: