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

不，您可以使用课程代替#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 () {
    $('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 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();
    });
});

处理许多ID

3 个答案: