當var長度小於1時更改邊框顏色？

Question

當var長度小於1時更改邊框顏色？

.............................................. .................................................. .................................................. ................

http://jsfiddle.net/66chLg61/

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 

<script type="text/javascript"> 
$(window).load(function(){ 
$('#txt').keydown(function (e){ 
    if(e.keyCode == 13){ 
     var ex_se = $('#txt').val(); 
     var ex_se_lenght = ex_se.length; 

     if(ex_se_lenght < '1') 
      { 
       // change border color id="txt" to red // 
       alert('red'); 
      } 
     else 
      { 
       // change border color id="txt" to black // 
       alert('black'); 
      } 
    } 
}) 
}); 
</script> 
<input type="text" id="txt"/> 

Answer 1

你可以做這樣的事情：

if(ex_se_lenght < '1') 
{ 
    // change border color id="txt" to red // 
    $("#txt").css('border-color', 'red'); 
    alert('red'); 
} 
else 
{ 
    // change border color id="txt" to black // 
    $("#txt").css('border-color', 'black'); 
    alert('black'); 
} 

Fiddle ...

編輯：錯誤的選擇...

Answer 2

試試這個：變化$(window).laod到$(document).ready和你比較字符串而不是整數長度，從而改變if(ex_se_lenght < '1')到if(ex_se_lenght < 1)

注意 - 警報將被視爲後按下'ENTER'按鈕，因爲條件if(e.keyCode == 13)在那裏。

代碼：

$(document).ready(function(){ 
$('#txt').keydown(function (e){ 
    if(e.keyCode == 13) 
    { 
     var ex_se = $(this).val(); 
     var ex_se_lenght = ex_se.length; 

     if(ex_se_lenght < 1) 
      { 
       // change border color id="txt" to red // 
       alert('red'); 
      } 
     else 
      { 
       // change border color id="txt" to black // 
       alert('black'); 
      } 
    } 
}) 
}); 

Demo

由於添加人@Danko，添加邊框顏色下面創建CSS類，並添加/刪除了紅色邊框

.alert { 
    outline:none; 
    border:2px solid red; 
} 

和jQuery ：

if(ex_se_lenght < 1) 
{ 
    $(this).addClass('alert'); 
    alert('red'); 
} 
else 
{ 
    $(this).removeClass('alert'); 
    alert('black'); 
} 

Demo By Danko

Answer 3

修改你的JS是這樣的：

$('#txt').keydown(function (e) { 
    if (e.keyCode == 13) { 
     var ex_se = $('#txt'); 
     var ex_se_lenght = ex_se.val().length; 
     var color = ex_se_lenght < 1 ? 'red' : 'black'; 
     ex_se.css('border-color', color); 
    } 
}); 

演示：http://jsfiddle.net/lotusgodkk/66chLg61/11/

Answer 4

嘗試

$(window).load(function() { 
    $('#txt').keydown(function (e) { 
     if (e.keyCode == 13) { 
      var ex_se = $('#txt').val(); 
      var ex_se_lenght = ex_se.length; 

      if (ex_se_lenght < '1') { 
       // change border color id="txt" to red // 
       $("#txt").removeClass("black").addClass("red"); // remove previous added class black 

      } else { 
       // change border color id="txt" to black // 
       $("#txt").removeClass("red").addClass("black"); // remove previous added class red 
      } 
     } 
    }) 
}); 

DEMO