處理很多ID

Question

我正在爲表單中的所有輸入字段創建一個字符計數器。這是我的腳本，當我專注於輸入字段，當我離開它，當我完成按一個鍵：

$(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(); 
    }); 
}); 

你可以看到它在這裏工作： http://jsfiddle.net/UQFD6/12/

的問題是：

我是否必須爲每個ID生成腳本？

我的意思是，該代碼將是相同的，但施加到不同的ID：#input1顯示#countainer1並修改#count1，然後用#countainer2和#count2#input2，等等。

我想用類，而不是IDS，但是當它顯示了容器，它將顯示類的每個容器，而不是隻有一個，我以書面領域。

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 IN1，平方英寸等

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

您可以使用屬性，例如您需要選擇與您當前的#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(); 
    }); 
});