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

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

干杯！

使用jQuery和textarea动态if / else语句

3 个答案:

Fiddle