特定の数値に達したときにクラスを追加する

クラスを追加し、特定の数に文字数で達したときにテキストの色を変更しようとしています。クラスが追加されておらず、色が変わらない理由を理解してください。特定の数値に達したときにクラスを追加する

<body> 
    <form> 
     <div class="form-group"> 
      <label for="description">Description:</label> 
      <textarea class="form-control" id="description"></textarea> 
      <span id="char">0</span> characters 
     </div> 
    </form> 
    </body> 

<script> 
$('#description').keyup(function(){ 
    var maxLength = 155; 
    var length = $(this).val().length; 
    $('#char').text(length); 
    if(length > maxLength) { 
     $('char').addClass("warning") 
    } 
}); 
</script>

とCSSで、警告は色のようになります。

おかげで赤！

出典

2017-04-13 Ben Thompson

Aもう少しエレガントな方法のように色を変更することができ、あなたがそうでない方法余分なif文が必要です。

$('#description').keyup(function(){ 
 
    var maxLength = 155; 
 
    var length = $(this).val().length; 
 
    $('#char') 
 
     .text(length) 
 
     .toggleClass("warning", length > maxLength); 
 
});

.warning { 
 
    color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <div class="form-group"> 
 
     <label for="description">Description:</label> 
 
     <textarea class="form-control" id="description"></textarea> 
 
     <span id="char">0</span> characters 
 
    </div> 
 
</form>

出典

2017-04-13 03:17:59 Neil

小さな間違いがあります。下記のようにJavaScriptコードを更新してください。

$('#description').keyup(function(){ 
    var maxLength = 155; 
    var length = $(this).val().length; 
    $('#char').text(length); 
    if(length > maxLength) { 
     $('#char').addClass("warning"); 
    } else { 
     $('#char').removeClass("warning"); 
    } 
});

「警告」クラスが追加されるため、そのクラスのCSSプロパティを追加して色を変更することができます。

出典

2017-04-13 03:02:41

セレクタに#を追加していません。

$('#description').keyup(function() { 
 
    var maxLength = 10; 
 
    var length = $(this).val().length; 
 
    $('#char').text(length); 
 
    if (length > maxLength) { 
 
    $('#char').addClass("warning") 
 
    } 
 
});

.warning { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-group"> 
 
    <label for="description">Description:</label> 
 
    <textarea class="form-control" id="description"></textarea> 
 
    <span id="char">0</span> characters 
 
</div>

出典

2017-04-13 03:05:18

stateでtoggleClassを使用することですあなたがこれを行うためのこのも

<script> 
$('#description').keyup(function(){ 
    var maxLength = 155; 
    var length = $(this).val().length; 
    $('#char').text(length); 
    if(length > maxLength) { 
     $('#char').css("color", "red"); 
    } else { 
     $('#char').css("color", "black"); 
    } 
}); 
</script>

出典

2017-04-13 03:17:44

特定の数値に達したときにクラスを追加する

答えて

関連する問題