jQuery的if/else语句上单击更改CSS

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

我想在一个if/else条件上面的代码，如果.message框的值是一个空字符串改变.message框的边框颜色变红。jQuery的if/else语句上单击更改CSS

有人请指导我在正确的方向吗？

我试过以下，它将边框改为红色，但不会触发其余的代码。

$('#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/

来源

2016-07-15 Simm

只要改变'如果（$（ “消息盒子”）。VAL（）=== ''）' – Rayon

（）'它**设置**值，它不会比较它。 – Barmar

为了得到你没有参数调用'.val（）'的值。 – Barmar

这个想法是检查你的条件，然后简单地基于表达式的评估添加或删除类。

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

来源

2016-07-15 17:43:28 mhodges

类似物：试试这个在这里，从你的例子分叉http://jsfiddle.net/lega911/rvp52f6y/或http://jsfiddle.net/lega911/uxst8s2n / – lega

轻微改变了你张贴在的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; 
     } 
    }); 
});

来源

2016-07-15 17:56:57

添加e.preventDefault功能，使您的POST操作不会被触发。
添加if/else语句来检查您的消息框是否为空。当你给一个参数`.VAL

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

来源

2016-07-15 20:11:40 Kawatare267

jQuery的if/else语句上单击更改CSS

回答

相关问题