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

回答

相關問題