jQuery addClass example

Change class name on click in jQuery

by h_tran93

HTML

<div class="js-AddButton__Target">
  <div class="p-AddSerif">
    <textarea class="sample"></textarea>
    <div class="p-AddSerif__count" data-count="10"></div>
  </div>
  <br>
  <div class="p-AddSerif">
    <textarea class="sample"></textarea>
    <div class="p-AddSerif__count" data-count="10"></div>
  </div>
  <br>
  <div class="p-AddSerif">
    <textarea class="sample"></textarea>
    <div class="p-AddSerif__count" data-count="10"></div>
  </div>
  <br>
</div>

 <input type="button" class="sample_btn" value="送信する">

CSS

.p-AddSerif__count.cnt_danger{
    color: #FF0000;
}

JavaScript

$(function(){
  function countTextArea(input) {
    //文字数を表示する.p-AddSerif__countを取得
    var counter = $(input).parents('.p-AddSerif').find(".p-AddSerif__count");
    // データ属性(data-count)から最大文字数を取得
    var maxLength = counter.data("count");
    // 現在の文字数を取得
    var currentLength = $(input).val().length;
    var htmlVal = currentLength + " / " + maxLength;

   //現在たい最大を比較
    if ( parseInt(currentLength) <= parseInt(maxLength) ) {
     /*  counter.html("<span style='color:red'>" + htmlVal + "</span>"); */
    counter.html(htmlVal);
      counter.removeClass('cnt_danger');
       $('.sample_btn').prop('disabled', false);
    } else {
      counter.html(htmlVal);
      $('.sample_btn').prop('disabled', true);
      counter.addClass('cnt_danger');
    }
  }

  // ページ表示時に文字数をカウントして表示
  $('textarea').each(function(){
    countTextArea($(this));
    var textLetter = $(this).val().length;
  });

  // フォーム入力時に文字数をカウントして表示
  $('textarea').on('keydown keyup keypress change',function(){
    countTextArea($(this));
  });
});