Jquery 키 입력 여러 입력

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

이 현재 마크 업을해야한다. 모든 div의 클래스 "내용"양식 "콘텐츠 1"의 아이디가 있다면 예, 당신은이 작업을 수행 할 수 있습니다 : 비슷하지만 훨씬 더 (강력

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

나는 그것을 그런 식으로 당신의 현재 HTML은 div를 추가 클래스로 제공하는 경우 가능성이 있습니다.)

데모 통합 내 제안 마크 업 변경 : 해당 사업부는 사용자가 클릭 또는 탭으로 즉시 표시되도록 http://jsfiddle.net/WD3CU/1/

또한, 내 의견으로는, .keyup()보다는 .focus() 이벤트를 사용하는 것이 더 나을 하나의 입력으로

Answer 2

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 코드를 사용할 수 있습니다 JSFiddle demo 작업

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

.

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

데모 : http://jsfiddle.net/WD3CU/

을하지만 div의에게 일반적인 클래스와 다른 ID를 준 경우는 깔끔한 것

Answer 3

이

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

demo

또는이

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

demo

또는 같은 속성 선택 등의 클래스 선택과 같은 공통의 선택에 결합해야 nnnnnn's answer

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

demo