Jquery的键入多输入

我想这样做，当有人使用输入与它相对应的文本将显示。Jquery的键入多输入

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

我会做KEYUP功能为每个输入还是有办法让一个KEYUP功能？

来源

2012-03-18 Claremont

这应该为你当前的标记做到这一点：

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

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

但是，如果你给的div一个共同的阶级，不同的IDS这将是整洁。例如，如果所有的div有一类“内容”，并在形式“内容1”的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将立即显示在用户点击或标签进入其中一个输入。

来源

2012-03-18 05:24:10 nnnnnn

你必须修改你的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。

来源

2012-03-18 05:07:29

感谢您的帮助队友，但是那不是真的是我要去的。输入值与我所要做的无关。我希望当有人点击输入时显示预先选择的消息来帮助他们回答问题。有点像当你问一个关于计算器的问题时，右边是如何给你提示你的标题，然后是body，然后是标签。谢谢您的帮助！ – Claremont 2012-03-18 05:23:04

你必须绑定到一个共同选这样

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

demo

或类选择这样

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

demo

或属性选择像nnnnnn's answer

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

demo

来源

2012-03-18 05:28:06 Starx

Jquery的键入多输入

回答

相关问题