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

我不確定標題是否正確。我似乎無法用言語正確表達這個問題！如何讓這個jQuery腳本在多個元素上單獨運行

我在我的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的偉大工程，但如果我有比文字區域的一個一個和類型更多其他的textarea更新其具有相同的值作爲一個我打字的櫃檯。

有人能幫我看看我做錯了什麼嗎？希望我只是錯過了一些簡單的地方！

謝謝！

來源

2013-01-04 Brigante

maxlength html屬性不是一個選項嗎？ – defau1t

我已經添加到了小提琴，並做了修改：

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添加到緩存選擇器 - 由於此原因，您將獲得更好的性能，但它完全是可選的。

來源

2013-01-04 15:30:46 povilasp

你的jsfiddle在這裏不起作用（Ubuntu 12.04，Firefox 16.0）。 –

謝謝@popvilasp這完美的作品！我不知道爲什麼我沒有看到我有一個身份證在那裏！我從幾年前做過的一個網站上修改了這個腳本，它是爲特定的字段而製作的，因此它是ID！我非常喜歡你的解決方案，所以非常感謝你的幫助。 – Brigante

@Olaf Dietsche在jsfiddle中有一些拼寫錯誤，但一旦這些排序完美的作品。像這樣：http://jsfiddle.net/KQKnN/1/所以我仍然將popvilasp的答案標記爲解決方案。 – Brigante

你可以簡化這個很多。通過只把最大限度的剋制，在maxlength屬性開始：

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

然後，通過他們選擇所有textarea S作一個maxlength屬性，循環：

$('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/

來源

2013-01-04 15:31:04

非常好的解決方案！目前，我無法將maxlength屬性添加到HTML。我將更改一些控制文本區域的代碼，以便我可以最終使用它，因爲它更優雅。謝謝！ – Brigante

@Johannes - 不管你是否使用'maxlength'，這個想法都是一樣的：你將計數器元素存儲在局部變量中，只更新它的值。 –

我想我明白你的意思了，謝謝！我會玩這個。與我粗暴的嘗試相比，它是美麗的代碼。 – Brigante

就你的具體問題而言，我認爲這條線和else內的一條是罪魁禍首：

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

這應該是：

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

這是否幫助？

來源

2013-01-04 15:34:06 Mutahhir

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

回答

相關問題