如何让此jQuery脚本在多个元素上单独运行

Question

我不确定标题是否正确。我似乎无法用语言恰当地表达这个问题！

<div class="limited limit-200">
    <div class="label">
        <label for="_je_industries_desc">Industry Description</label>
    </div>
    <div class="input">
        <textarea class="large-text" name="industries_desc" id="industries_desc" cols="60" rows="3"></textarea>
        <p id="industries_desc_description" class="description">Put a short description of this industry.</p>
    </div>
</div>
<div class="limited limit-100">
    <div class="label">
        <label for="_je_seo_description">Meta Description</label>
    </div>
    <div class="input">
        <textarea class="large-text" name="seo_description" id="seo_description" cols="60" rows="3"></textarea>
        <p id="seo_description_description" class="description">Put a short description of the content of this page.</p>
    </div>
</div>

这是到目前为止我的jQuery。例如，它从HTML limit-200中的类名获取字符限制。

jQuery(document).ready(function(){
    jQuery('.limited').each(function() {
        // Get the class names of any element that has the class .limited
        var className = jQuery(this).attr('class');

        // Use regex to capture the character limit class (limit-#)
        var limit = className.match(/[?:limit-](\d+)/);

        // Set the limit var to the match from the regex
        var limit = limit[1];

        // Calculate the number of characters that are still available (limit - characters in field)
        var chars_left = limit - jQuery('textarea', this).val().length;

        //alert(chars_left);

        // Attach an event handler to each textarea with the class .limited
        jQuery('textarea', this).on('keyup', function() {
            var maxchar = limit;
            var cnt = jQuery(this).val().length;
            var remainingchar = maxchar - cnt;
            if(remainingchar < 0){
                jQuery('#limit-counter span').html('<strong>0</strong>');
                jQuery(this).val(jQuery(this).val().slice(0, limit));
            } else {
                jQuery('#limit-counter span').html('<strong>' + remainingchar + '</strong>');
            }
        });

        // Display number of characters left
        jQuery('textarea', this).after('<span id="limit-counter">Remaining characters: <span><strong>' + chars_left + '</strong></span></span>');
    });
});

这对于单个文本区域非常有效，但是如果我有多个文本区域，并且在另一个文本区域中输入一个文本区域，则另一个文本区域会用与我输入的文本区域相同的值更新其计数器。

有人能帮我找出我哪里做错了吗？希望我只是错过了一些简单的东西！

谢谢!

Answer 1

我已经将这个添加到了一个小提琴中，并进行了修改：

http://jsfiddle.net/KQKnN/

    var $textarea=jQuery(this).find('textarea');
    var uniqueId= $textarea.attr('id');

这里的问题是你的限制计数器必须是唯一的，你不能在一个页面上有两个具有相同id的元素。

        if(remainingchar < 0){
            jQuery('#limit-counter-'+uniqueId+' span').html('<strong>0</strong>');
            jQuery(this).val(jQuery(this).val().slice(0, limit));
        } else {
            jQuery('#limit-counter-'+uniqueId+' span').html('<strong>' + remainingchar + '</strong>');
    // .....

    $textarea.after('<span id="limit-counter-'+uniqueId+'">Remaining characters: <span><strong>' + chars_left + '</strong></span></span>');

我还将文本区域添加到缓存选择器中-因此您将获得更好的性能，但它完全是可选的。

Answer 2

您可以将其简化很多。首先，只需在maxlength属性中设置最大约束：

<textarea name="seo_description" maxlength="100"></textarea>

然后，选择所有具有maxlength属性的textarea，并遍历它们：

$('textarea[maxlength]').each(function() {
    var $this = $(this),
        limit = $this.attr('maxlength'),
        $counter = $('<span class="limit-counter">Remaining characters: <strong></strong></span>')
                    .insertAfter(this).find('strong');

    $this.on('keyup', function() {
        $counter.text( limit - $this.val().length );
    })
    .trigger('keyup');
});

在这里可以看到它的实际效果：http://jsfiddle.net/U4Mk6/

Answer 3

就您的具体问题而言，我认为这一行和else中的那一行是罪魁祸首：

jQuery('#limit-counter span').html('<strong>0</strong>');

这应该是：

jQuery('#limit-counter span', this).html('<strong>0</strong>');

这有帮助吗？