當達到某個數字時添加類

我試圖添加一個類並在字符數達到特定數字時更改文本的顏色。請幫我弄清楚爲什麼課程沒有被添加，顏色沒有改變。當達到某個數字時添加類

<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

稍微更優雅的方式是使用toggleClass與state，這樣，你不需要額外的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

你可以改變顏色像這樣做的，這也

<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

當達到某個數字時添加類

回答

相關問題