'TypeError例外：$（...）characterCounterは関数ではありません' 私のjQueryプラグインで

Question

私はこのプラグインの作成jQueryプラグイン

を練習しています：

(function ($) { 
    'use strict'; 
    $.fn.characterCounter = function() { 
     return this.each(function (index, item) { 
      $(item).keyup(function updateCharCounter() { 
       var $me = $(this), 
        maxLength = parseInt($me.attr('maxlength'), 10), 
        charCount = $me.val().length, 
        $counter = $me.siblings('.limit'); 

       $counter.text('limit: ' + maxLength + ' characters. remaining: ' + (maxLength - charCount)); 
      }); 
     }); 
    }; 

})(jQuery); 

と私のhtmlコードを：

<div class="form-group"> 
    <textarea id="short-message" maxlength="100" cols="8"></textarea> 
    <p class="limit">limit: 100 characters</p> 
</div> 

<div class="form-group"> 
    <textarea id="short-shory" maxlength="150" cols="8"></textarea> 
    <p class="limit">limit: 150 characters</p> 
</div> 

<div class="form-group"> 
    <input id="nickname" maxlength="50" size="32"/> 
    <p class="limit">limit: 50 characters</p> 
</div> 


<script src="~/Scripts/jquery-1.10.2.js"></script> 
<script src="~/Scripts/showCharacterCharlimit.js"></script> 

<script> 
    $(document) 
     .ready(function() { 
      'use strict'; 
      $('textarea').characterCounter(); 
     }); 

</script> 

が、私は、このエラーを取得：

TypeError: $(...).characterCounter is not a function

を

私はなぜ、誰も私を助けることができるか分からないのですか？

Answer 1

(function ($) { 
 
    'use strict'; 
 
    $.fn.characterCounter = function() { 
 
     return this.each(function (index, item) { 
 
      $(item).keyup(function updateCharCounter() { 
 
       var $me = $(this), 
 
        maxLength = parseInt($me.attr('maxlength'), 10), 
 
        charCount = $me.val().length, 
 
        $counter = $me.siblings('.limit'); 
 

 
       $counter.text('limit: ' + maxLength + ' characters. remaining: ' + (maxLength - charCount)); 
 
      }); 
 
     }); 
 
    }; 
 

 
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-group"> 
 
    <textarea id="short-message" class="wordcount" maxlength="100" cols="8"></textarea> 
 
    <p class="limit">limit: 100 characters</p> 
 
</div> 
 

 
<div class="form-group"> 
 
    <textarea id="short-shory" class="wordcount" maxlength="150" cols="8"></textarea> 
 
    <p class="limit">limit: 150 characters</p> 
 
</div> 
 

 
<div class="form-group"> 
 
    <input id="nickname" class="wordcount" maxlength="50" size="32"/> 
 
    <p class="limit">limit: 50 characters</p> 
 
</div> 
 
<script> 
 
    $(document) 
 
     .ready(function() { 
 
      'use strict'; 
 
      $('.wordcount').characterCounter(); 
 
     }); 
 

 
</script>

あなたはこのためのjQueryを追加する必要があるので、あなたはjqueryの依存関係を持って、ご確認ください。 そして私は共通クラスを使用して、すべてのタイプの入力フィールドで機能するようにしました。

おかげ