如何讓這個jQuery腳本在多個元素上單獨運行

Question

我不確定標題是否正確。 我似乎無法用語言恰當地表達這個問題！

我的HTML中有以下文本字段，我試圖限制可以輸入的字符數：

<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的類名獲取字符限制。 然后計算鍵入時剩余的字符數，並輸出textarea下的剩余字符。

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

這適用於單個textarea，但如果我有多個textareas並輸入其中一個textareas，則另一個textarea更新其計數器的值與我輸入的值相同。

請有人幫我看看我做錯了什么？ 希望我只是在某處丟失一些簡單的東西！

謝謝！

Answer 1

您可以簡化這個了很多 。 首先將最大約束放在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 2

我把它添加到一個小提琴並做了修改：

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

我還將textarea添加到緩存選擇器中 - 因此你會獲得更好的性能，但它完全是可選的。

Answer 3

至於你的具體問題，我認為這一行和else是罪魁禍首：

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

應該是：

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

這有幫助嗎？