Javascript 处理多个ID

我正在为表单中的所有输入字段创建一个字符计数器。这是我的脚本，当我专注于输入字段时，当我离开它时，以及当我按完键时：

$(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生成脚本吗？

我的意思是，代码是相同的，但应用于不同的ID：

\input1

显示

\countainer1

并修改

\count1

，然后使用

\countainer2

和

\count2

修改

\input2

，等等

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

我建议：

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

---

不可以，您可以使用类而不是

#in1

，例如，将in类添加到您当前在in1、in2等中指定id的元素中

您可以在需要选择的与当前

#in1

关联的元素上使用属性，例如

数据id=1

，例如

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

---

您可以改为尝试使用类：

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

---

我不知道兄弟姐妹是干什么的，但我会找到答案的！谢谢

.sides（）

用于查找同一级别的元素，就像在您的案例中，您有

输入

，然后在其下方显示文本的div。这或多或少是我想做的，但我不知道如何做。我试试看，谢谢！我看到你删除了你的消息，但我还是回答你：不，别误会，我不是说我不喜欢你的代码或其他东西，只是我不知道“keyup”或“[id^=in]”是什么意思。我是JQuery和JavaScript的新手。谢谢

keyup

在你的代码中，我没有添加它。我会尝试它Eric，如果我让它工作，我会更新我的帖子。谢谢

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