Question

我想显示/隐藏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');
        }

Answer 1

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

需要在id前面使用＃。
使用$（'＃txtUsername'）。val（）。length来获取长度。
需要放入jquery文件引用。（不知道你是否把它放了）
$（'＃chooseScan'）。addClass（'hide'）;（是selectScan还是结果？）

以下是工作代码。

<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>

Answer 2

您可以将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');

    }   
}

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

使用$('#InputTagId')按ID
使用$('#InputTagId').val().length获取其值的长度

当文本框为空时隐藏div - 主干，javascript

2 个答案: