使用單個函數更新多個div的charcount

Question

我正在嘗試使用我在網上找到的代碼片段來實現charcount。 它適用於單個文本區域。 我有多個具有不同計數限制的文本區域。 這是適用於單個表單的代碼。

Javascript:
function countChar(val,count,focus){

        var len = val.value.length;
    var lim=count;
    var focussed=focus;

    if (len >= lim) {

            $('#charNum').text(lim - len);
            $('#charNum').addClass('exceeded');
        /* val.value = val.value.substring(0, lim);*/   
        }else {
        if(focussed===0){
            $('#charNum').html('<a>&nbsp;</a>');
        }
                else {
            $('#charNum').text(lim - len);
            $('#charNum').removeClass('exceeded');
        }
        }
};

HTML:
<div id='charNum' class='counter'>&nbsp;</div>
<textarea id='description' name='description'  onkeyup=\"countChar(this,200,1)\" onblur=\"countChar(this,200,0)\" rows='10' cols='20'></textarea>

如果我有兩個文本區域，如何修改此代碼才能工作？ 我知道如何在腳本中獲取div的id，但我不知道如何正確更新counter div，比如＃charNum1和＃charNum2。 欣賞一些提示。 謝謝

編輯：我在想，如果有幫助，我可以將計數器div命名為“Charnum + divName”

Answer 1

如果使用jQuery附加事件處理程序，則可以在處理程序中使用this來引用觸發事件的任何元素，從而避免在函數內部硬編碼元素ID。

我建議添加一個允許ma​​x chars的屬性並刪除內聯事件處理程序：

<div id='charNum' class='counter'>&nbsp;</div>
<textarea id='description' name='description' data-maxChars="200" rows='10' cols='20'></textarea>
<div id='charNum2' class='counter'>&nbsp;</div>
<textarea id='otherfield' name='otherfield' data-maxChars="400" rows='10' cols='20'></textarea>

然后：

$(document).ready(function() {
    $("textarea[data-maxChars]").on("keyup blur", function(e) {
        var $this = $(this),
            $counter = $this.prev(),
            len = $this.val().length,
            maxChars = +$this.attr("data-maxChars");

        $counter.text(maxChars - len).toggleClass("exceeded", len > maxChars);
    });
});    

演示： http ： //jsfiddle.net/nnnnnn/GTyW3/

Answer 2

如果每個textarea都有自己的div，你可以在countChar函數中添加一個額外的參數，這個函數就是div的名字。 所以你有類似的東西：

function countChar(val,count,focus, charCountDiv)

然后，jQuery不是在函數中硬編碼，而是：

$(charCountDiv) 

這應該做我認為你想做的事情。