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

示例：availability syntax in Swift

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

或者，您可以选择在＆＃34;实时＆＃34;中检查输入。因为用户输入如下：

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

jQuery if / else语句在点击时更改css

3 个答案: