javascript - 带有 jQ​​uery 和 textarea 的动态 if/else 语句

Question

所以我正在尝试设置 <textarea> 的样式当输入了多个字符时突出显示的标签。(对于联系表格)。当有人填写表格时，字段将全部突出显示为绿色，让他们知道它是有效的。总的来说，我对 JS 和 jQuery 很陌生，但我很确定这是可行的。我可以使用 $('#message').addClass('valid')本身，它将应用该类，但是当我添加 if/else 语句时，没有任何效果。这是脚本

\\ Begin Highlight Code
var $messageval = $('#message').val()
    if ($messageval.length != 0 ){
     $('#message').addClass('valid');
    }
    else ($messageval.length = 0 ){
      $('#message').removeClass('valid');
    }
  });

我已经用谷歌搜索了几个小时，但我找不到任何可以根据文本长度变量动态添加和删除类的内容。

谢谢

Answer 1

你错过了else if

 if ($messageval.length != 0 ){
     $(this).addClass('valid');
    }
    else if($messageval.length == 0 ){ //<-- Here
      $('#message').removeClass('valid');
    }

基本上你可以拥有

   if ($messageval.length != 0 ){
     $('#message').addClass('valid');
    }
    else { //<-- Here
      $('#message').removeClass('valid');
    }

我想这就是您要找的:-

  $(function(){
   $('#message').on('keyup', function () {
    var $messageval = $.trim($(this).val()); //$.trim here  to avoid whitespace preventing validation.

    if ($messageval.length != 0) {
        $(this).addClass('valid'); //this here represent the textarea dom element, and $(this) is the jquery wrapper.
    } else {
        $(this).removeClass('valid');
    }
  });
 });

Fiddle