Question

我正在尝试添加一个类，并在字符数达到某个数字时更改文本的颜色。请帮我弄清楚为什么没有添加课程，颜色没有变化。

   <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中，警告颜色为：红色

谢谢！

Answer 1

只有一个小错误。更新您的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属性以更改颜色。

Answer 2

您忘了在选择器中添加#。

$('#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>

Answer 3

更优雅的做法是将toggleClass与state一起使用，这样您就不需要额外的if语句。

＆＃13;

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

＆＃13;

.warning {
  color:red;
}

＆＃13;

<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>

＆＃13;

Answer 4

您也可以像这样更改颜色

<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>

达到某个数字时添加类

4 个答案: