Jquery keyup多个输入

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都有一个类"content"和一个"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.