javascript - 处理多个 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，然后#input2是#countainer2和#count2，等等。

我想过使用类而不是 id，但是当它显示容器时，它将显示该类的每个容器，而不仅仅是我正在写入的字段的容器。

Answer 1

不，您可以使用 class 而不是#in1，例如将in类添加到您当前提供 id in1、in2等的元素中。

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

data-id=1您可以在需要选择的与当前关联的元素上使用属性#in1，例如

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

Answer 2

您可以尝试使用类：

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

Answer 3

I'd suggest this :

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