对于我创建的每个 textarea，我希望它有它的“个人字数”。答案

【问题标题】：For every textarea i create, i want it to have its 'personal word count' on it.对于我创建的每个 textarea，我希望它有它的“个人字数”。
【发布时间】：2016-07-12 01:25:07
【问题描述】：

下面的代码是每次单击按钮时都会出现额外的 2 个文本框和 1 个文本区域。

var x=1;
        var count=0;

        $('body').on('click','#add',function()
        {
            if(count < 6)
            {   
                $('#div').append("<div class='line'><input type='text' name = 'txta"+x+ "' id='txta"+ x +"'><span class =wordtab></span>      <textarea rows='9' onkeyup='countChar2(this)' cols='50' name = 'txtc"+x+ "' id='txtc"+ x +"'></textarea>   <span class =wordtab></span><input style = 'width:50px' type='text' name = 'txtb"+x+"' id='txtb"+ x +"'><span class =wordtab></span><button class='delete' value ='Delete Row'>Delete Row</button></div><div style='margin-left: 750px' id='charNum" + x + "'></div>");
                count++;
                x++;
            }
            else
            alert("Maximum 6 Skills");
        });

        $('body').on('click','.delete',function()
        {
        $(this).closest('.line').remove(); 

        count--;
        });

下面的函数是我目前拥有的代码（我知道它是错误的），用于为我添加的每个文本区域放入一个计数器。

        function countChar2(val) 
        {
             var len = val.value.length;
             if (len >= 200) 
             {
             val.value = val.value.substring(0, 500);

            } 
            else 
            {
                var id = "charNum" + x;
                $(id).text((200 - len)+" words left");
            }
        };

所以我的目标是每次我单击添加行并开始在 textarea 上键入时，它都会在 textarea 框正下方显示该特定 texarea 的字数。

【问题讨论】：

stackoverflow.com/questions/17909646/… 或 stackoverflow.com/questions/23133617/…
为什么你的代码不起作用？有什么问题？
@RC。我的字数有效，但不知道如何附加它，以便每个
都有一个单独的 ID
@DavidH。问题是 ID 对于字数必须是唯一的，但我不知道如何使其唯一。我尝试使用我的 x 变量，但真的不知道如何应用它

标签： javascript jquery html

【解决方案1】：

要为每个文本区域添加一个唯一的计数器，您可以将另一个 div 附加到具有特定类的文本区域，例如

将 HTML 结构设置为：

<textarea></textarea><div class='text-count-area'>Word Count: 0</div>

在添加每个文本区域的位置添加以下 JS，例如就在原始代码中的“count++”之前（注意：这不是最有效的方法，但可以轻松地与您当前的代码一起使用）：

 // Bind the text area to the keyup event
 $("textarea").on('keyup', function(val) {

    // Simple word count
    var words = this.value.match(/\S+/g).length;

    // Write the word count to the immediate text-count-area div afterwards
    $(this).next(".text-count-area").text("Text count" + words);
 });

为了便于阅读，此处的字数保持简单，但其他答案的逻辑（在 cmets 中突出显示）可以在此阶段实现。

此工作的 JS Fiddle 演示是 here。

【讨论】：

【解决方案2】：

让我们看看你的例子：

你通过.append方法添加每个div，没错
你按onkeyup事件来计算输入符号，也是正确的
您只需要更新您的 countChar2 函数，因为该函数在该行中有错误的主体：
```
        var id = "charNum" + x;
        $(id).text((200 - len)+" words left");
```

首先：尝试通过您喜欢的浏览器中的开发人员工具调试您的代码，并在该行中添加中断。与在 stackoverflow 中发布问题相比，此步骤可以为您提供更多更快的信息 :)

对于onkeyup 事件，您应该在函数中使用指向this 对象的链接，而不是id：

            $(val).parent().find('.words-left').val((200 - len));

这一行使用val 作为刚刚附加行中的textarea 对象的链接。 .parent() 使您可以访问包装器，find() 查找单词左字段的输入。（我已在您的输入中添加了“.words-left”类，请参阅下面的提琴手）。此代码在您刚刚添加的行的阶段有效。

您的$('body').click() 代码应该在文档完全加载并准备好DOM 时执行。但是您将来创建的所有 id 都不会附加该 DOM。这就是您的删除功能正常工作的原因 - 该功能使用 class selector 而不是 id。

我提出的代码不使用id 选择器，因为它不是必需的。我需要的一切 - 链接到新行中的当前对象，val - 我需要该操作。

顺便说一句：当您实现与对象一起使用的函数时，例如 onkeyup='countChar2(this)'，使用 object 作为传递变量的更好方法 - var countChar = function(obj) {。因为val 以普通方式用于标量值。

你可以在这里查看我的代码https://jsfiddle.net/jo0cd3yr/1/

【讨论】：