Question

我有以下jQuery代码：

(function ($) {
    $.fn.textareaCounter = function (options) {
        // setting the defaults
        // $("textarea").textareaCounter({ limit: 100 });
        var defaults = {
            limit: 100
        };
        var options = $.extend(defaults, options);

        // and the plugin begins
        return this.each(function () {
            var obj, text, wordcount, limited;

            obj = $(this);
            obj.after('<span style="font-size: 11px; clear: both; margin-top: 3px; display: block;" id="counter-text">Max. ' + options.limit + ' words</span>');

            obj.keyup(function () {
                text = obj.val();
                if (text === "") {
                    wordcount = 0;
                } else {
                    wordcount = $.trim(text).split(" ").length;
                }
                if (wordcount > options.limit) {
                    $("#counter-text").html('<span style="color: #DD0000;">0 words left</span>');
                    limited = $.trim(text).split(" ", options.limit);
                    limited = limited.join(" ");
                    $(this).val(limited);
                } else {
                    $("#counter-text").html((options.limit - wordcount) + ' words left');
                }
            });
        });
    };
})(jQuery);

And then the following:

$("textarea").textareaCounter();

最后是HTML：

<textarea class="scanwid" name="q100" id="q100" rows="5" ></textarea>
<textarea class="scanwid" name="q101" id="q101" rows="5" ></textarea>
<textarea class="scanwid" name="q102" id="q102" rows="5" ></textarea>

它适用于一个textarea计算最大字数等，但是当我在页面上添加更多textarea时。计数器和限制器对另一个textareas不起作用 - 我知道我错过了一些非常简单但却无法弄清楚的东西！

如何确保每个Textarea都有一个计数器？

Answer 1

obj.after('<span style="font-size: 11px; clear: both; margin-top: 3px; display: block;" id="counter-text">Max. '+options.limit+' words</span>');

您正在添加带有ID计数器的span元素，而不是使用类。而不是通过

来引用它

$("#counter-text")

使用：

obj.next('span.counter-text');

Answer 2

原因是因为使用id来选择具有“Words left ...”的跨度，该id应该是唯一的。在那里使用课程，你的问题就解决了。这个：

obj.after('<span style="font-size: 11px; clear: both; margin-top: 3px; display: block;" id="counter-text">Max. ' + options.limit + ' words</span>');

必须是

（注意从id到class的变化）

obj.after('<span style="font-size: 11px; clear: both; margin-top: 3px; display: block;" class="counter-text">Max. ' + options.limit + ' words</span>');

然后，当你选择它时，这个：

$("#counter-text")

必须成为：

$(this).next(".counter-text")

演示：http://jsfiddle.net/2mweC/

Answer 3

尝试

$("textarea").each(function() {
    $(this).textareaCounter();
});

Answer 4

请参阅此demo

我使用了下一个元素的方法，我们也可以采用不同的方法。

(function($){
        $.fn.textareaCounter = function(options) {
            // setting the defaults
            // $("textarea").textareaCounter({ limit: 100 });
            var defaults = {
                limit: 100
            };  
            var options = $.extend(defaults, options);

            // and the plugin begins
            return this.each(function() {
                var obj, text, wordcount, limited;

                obj = $(this);
                obj.after('<span style="font-size: 11px; clear: both; margin-top: 3px; display: block;" class="counter-text">Max. '+options.limit+' words</span>');

                obj.keyup(function() {
                    text = obj.val();
                    if(text === "") {
                        wordcount = 0;
                    } else {
                        wordcount = $.trim(text).split(" ").length;
                    }
                    if(wordcount > options.limit) {
                        $(this).next().html('<span style="color: #DD0000;">0 words left</span>');
                        limited = $.trim(text).split(" ", options.limit);
                        limited = limited.join(" ");
                        $(this).val(limited);
                    } else {
                        $(this).next().html((options.limit - wordcount)+' words left');
                    } 
                });
            });
        };
    })(jQuery);

$("textarea").textareaCounter();

jQuery - 将代码应用于多个textareas

4 个答案: