Question

下面的代码是每次点击按钮时出现额外的2个文本框和1个textarea。

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

下面的函数是我目前拥有的代码（我知道它错了）放入我添加的每个textarea的计数器中。

        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的字数。

Answer 1

要为每个textarea添加一个唯一的计数器，您可以将另一个div添加到具有特定类别的textarea中。

将HTML结构设置为：

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

在添加每个textarea的位置添加以下JS，例如就在计算++＆＃39;之前在您的原始代码中（注意：这不是最有效的方法，但这对您当前的代码很容易）：

 // 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);
 });

为了便于阅读，单词计数在这里保持简单，但其他答案的逻辑（在评论中突出显示）可以在此阶段实施。

这项工作的JS小提琴演示是here。

Answer 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()查找单词left field的输入。（我在你的输入中添加了'.words-left'类，请看我的小提琴手）。此代码适用于您刚添加的行。

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

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

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

您可以在此处查看我的代码https://jsfiddle.net/jo0cd3yr/1/

对于我创建的每个textarea，我希望它拥有其个人字数＆＃39;在上面。

2 个答案: