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

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

Here is a working demo

代码如下所示:

$('#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");
  }
});