jQuery if / else语句，可在单击时更改css

Question

$('#submitbtn').on("click", function() {
    $('.message-box').val();
    var message = $(".message-box").val();
    $('#visible-comment').html(message);
    $('.message-box').hide();
  return false;
});

我希望上述代码处于if / else条件下，如果.message-box的值为空字符串，则将.message-box的边框颜色更改为红色。

有人可以指导我正确的方向吗？

我尝试了以下操作，该操作将边框更改为红色，但未触发其余代码。

    $('#submitbtn').on("click", function() {

  if ($(".message-box").val("")) {
    $(".message-box").css("border","2px solid red");
  } else {

    $('.message-box').val();
    var message = $(".message-box").val();
    $('#visible-comment').html(message);
    $('.message-box').hide();
  return false;
  }
});

示例在这里： https : //jsfiddle.net/wf69c7uu/2/

Answer 1

想法是检查您的条件，然后根据表达式的计算简单地添加或删除类。

这是一个工作演示

该代码如下所示：

$('#submitbtn').on("click", function() {
    $('.message-box').val();
    var message = $(".message-box").val();
    if (message === '') {
        $('.message-box').addClass("invalid");
    }
    else {
      $('.message-box').removeClass("invalid");
      $('#visible-comment').html(message);
      $('.message-box').hide();
    }
  return false;
});

或者，您可以选择在用户键入时“实时”检查输入，如下所示：

$('#submitbtn').on("click", function() {
    $('.message-box').val();
    var message = $(".message-box").val();
    if (!$(".message-box").hasClass("invalid")) {
      $('#visible-comment').html(message);
      $('.message-box').hide();
    }
  return false;
});

$(".message-box").on("input propertychange", function () {
    var $this = $(this);
    if (!$this.hasClass("invalid") && $this.val() === '') {
    $this.addClass("invalid");
  }
  else if ($this.hasClass("invalid") && $this.val() !== '') {
    $this.removeClass("invalid");
  }
});

Answer 2

稍微更改了您在jsfiddle上发布的代码：

• 添加了一个if else块。

• 添加了$('.message-box').css("border", "4px solid red"); 设置textarea为空时的边框颜色。

   $(function () { $('#submitbtn').on("click", function () { var message = $(".message-box").val(); if (message == "") { $('.message-box').css("border", "4px solid red"); } else { $('#visible-comment').html(message); $('.message-box').hide(); return false; } }); }); 

Answer 3

• 添加e.preventDefault函数，以便您的POST操作不会被触发。
• 添加if / else语句以检查您的消息框是否为空。

 $('#submitbtn').on("click", function(e) { e.preventDefault(); $('.message-box').val(); var message = $(".message-box").val(); if(message == ""){ $(".message-box").css("border","2px solid red"); }else{ $('#visible-comment').html(message); $('.message-box').hide(); } });