많은 ID 핸들

Question

양식의 모든 입력 필드에 대한 문자 카운터를 만들고 있습니다. 이것은 내가 그것을 떠날 때 내가 입력 필드에 초점을 맞출 때 내 스크립트, 그리고 나는 누르면 완료 할 때 키 이 http://jsfiddle.net/UQFD6/12/

질문은 :

$(document).ready(function() { 
    $("#in1").keyup(function() { 
     $("#count1").text(50 - this.value.length); 
    }); 
    $("#in1").focus(function() { 
     $("#countainer1").show(); 
     $("#count1").text(50 - this.value.length); 
    }); 
    $("#in1").blur(function() { 
     $("#countainer1").hide(); 
    }); 
}); 

현재 작업을 볼 수 있습니다 :

각 ID에 대해 스크립트를 생성해야합니까?

I 의미 코드는 동일하지만 서로 다른 ID에 적용될 것이다 #input1는 #countainer1을 도시 #count1, #countainer2과 함께 다음 #count2#input2 수정 등.

내가 대신 ID의 클래스를 사용하여 생각하지만 컨테이너를 표시 할 때, 대신 나는에 쓰고 있어요 필드의 단지 하나의.

Answer 1

내가 좋겠, 그 클래스의 모든 컨테이너를 표시합니다 예를

$(document).ready(function() { 
    $('input[id^=in]').each(function(){ // all inputs whose id starts with "in" 
     var i = this.id.slice(2); // finds "32" from "in32" 
     $(this).keyup(function() { 
      $("#count"+i).text(50 - this.value.length); 
     }).focus(function() { // let's chain 
      $("#countainer"+i).show(); 
      $("#count"+i).text(50 - this.value.length); 
     }).blur(function() { 
      $("#countainer"+i).hide(); 
     }); 
    }); 
}); 

Answer 2

아니, 당신은 #in1 대신 클래스를 사용할 수 있습니다 :이 제안 당신은 현재 ID 당신은 속성을 사용할 수있는 등

$(".in").keyup(function() { 

IN1, 평방인치을주는 요소 클래스의 를 추가 예를 들어, 현재 #in1과 연결된 요소 (예 : #in1) 중에서 선택해야하는 요소에 대한 data-id=1

var id = $(this).data('id'); 
$(".count[id='" + id + "']").text(...); 

Answer 3

대신 클래스를 시도 할 수 있습니다 :

$(document).ready(function() { 
    $(".in").keyup(function() { 
     $(this).siblings(".count").text(50 - this.value.length); 
    }).focus(function() { 
     $(".countainer").show(); 
     $(this).siblings(".count").text(50 - this.value.length); 
    }).blur(function() { 
     $(this).siblings(".countainer").hide(); 
    }); 
});