当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