0

我想根据文本框的长度显示/隐藏一个 div。我使用的是骨干结构，所以不知道在哪里放置代码..

但这是我的代码；

<input type="text" id="txtUsername" placeholder="username"><br> <input
type="text" id="txtPassword" placeholder="password">

<div id="results">
  // text here
</div>

js

$('#chooseScan').addClass('hide');
        if ($('txtUsername').length > 0 && $('txtPassword').length > 0) {
            $('#results').removeClass('hide');
            $('#results').addClass('show');
        }
4

2 回答 2

0

您可以keyup像这样将事件链接到您的文本框： DEMO

$(document).ready(function() {    
    $('#txtUsername').bind('keyup', showHideDiv);
    $('#txtPassword').bind('keyup', showHideDiv);    
});


function showHideDiv(){
    if ($('#txtUsername').val().length > 0 && $('#txtPassword').val().length > 0) {
        $('#results').removeClass('hide');
        $('#results').addClass('show');
    }
    else {
        $('#results').removeClass('show');
        $('#results').addClass('hide');

    }   
}

此外，您的代码几乎没有问题：

  1. 用于$('#InputTagId')通过 ID 访问它们
  2. 用于$('#InputTagId').val().length获取其值的长度
于 2012-11-08T18:23:41.607 回答
0

您的代码中几乎没有我之前没有看到的错误。

  1. 需要在id前面使用#。
  2. 使用 $('#txtUsername').val().length 获取长度。
  3. 需要放jquery文件参考。（不知道放不放）
  4. $('#chooseScan').addClass('hide');（是chooseScan还是results？）

下面是工作代码。

<html>
<head>
 <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<style type="text/css">
.hide { 
    visibility: hidden;
}
.show {
    visibility: visible;
}
</style>
<script type="text/javascript">
$(document).ready(function() {

     $('#results').addClass('hide');
     $('#txtUsername').bind('input', function() { 

        if ($('#txtUsername').val().length > 0 && $('#txtPassword').val().length > 0) {
            $('#results').removeClass('hide');
            $('#results').addClass('show');
        }
} );

 });

</script>

</head>
<input type="text" id="txtUsername" placeholder="username"><br> 
<input type="text" id="txtPassword" placeholder="password">
<div  id="results">

  // text here</div>

</html>
于 2012-11-08T17:38:35.623 回答