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');
    }
  });
 });

小提琴

Answer 2

$(document).ready(function(){

    $("#message").keyup(function(){
        var messageval = $('#message').val();
        if (messageval.length > 1) {
            $('#message').addClass('valid');
        } else {
            $('#message').removeClass('valid');
        }
    });

});

Answer 3

将您的代码更改为此

 $(document).ready(function(){

        $('#message').trigger('change');//if you initially want to check the textarea

        $('#message').on('change', function(){
        var $messageval = $(this).val();
        if ($messageval.length != 0 ){
         if (!$(this).hasClass("valid")) {
            $(this).addClass("valid");
          }
        }
        else ($messageval.length == 0 ){
          if ($(this).hasClass("valid")) {
             $(this).removeClass("valid");
          }
        }
      });
    });

干杯!