0

我有以下 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？

4

4 回答 4

2 
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');
于 2013-07-25T06:27:34.350 回答
2

原因是因为有“Words left..”的 span 是使用 id 选择的，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/

于 2013-07-25T06:34:33.707 回答
0

尝试

$("textarea").each(function() {
    $(this).textareaCounter();
});
于 2013-07-25T06:25:40.343 回答
0

请看这个演示

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

(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();
于 2013-07-25T06:35:10.837 回答