当文本框为空时隐藏div-主干，javascript_Javascript_Backbone.js

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

javascript backbone.js

当文本框为空时隐藏div-主干，javascript,javascript,backbone.js,Javascript,Backbone.js,我想根据文本框的长度显示/隐藏div。我使用的是主干结构，因此不确定将代码放置在何处但这是我的代码 <input type="text" id="txtUsername" placeholder="username"><br> <input type="text" id="txtPassword" placeholder="password"> <div id="results"> // text here </div> 您的

我想根据文本框的长度显示/隐藏div。我使用的是主干结构，因此不确定将代码放置在何处

但这是我的代码

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

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

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

需要在id前面使用#

使用$（'#txtUsername'）.val（）.length获取长度

需要放置jquery文件引用。（不知道是否放置）

$（'#chooseScan'）。addClass（'hide'）；（选择扫描还是结果？）

下面是工作代码

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


.hide{
可见性：隐藏；
}
.表演{
能见度：可见；
}
$（文档）.ready（函数（）{
$（'#results'）.addClass（'hide'）；
$（'#txtUsername'）.bind（'input'，function（）{
如果（$（'#txtsername'）.val（）.length>0&$（'#txtspassword'）.val（）.length>0）{
$（“#结果”）.removeClass（'hide'）；
$（“#结果”）.addClass（'show'）；
}
} );
});


//此处文本

您可以将

keyup

事件链接到如下文本框：

此外，您的代码也存在一些问题：

使用

$（'#InputTagId'）

按ID访问它们

使用

$（'#InputTagId'）.val（）.length

获取其值的长度

你的问题是什么？是因为代码不起作用，还是因为你不知道把它放在哪里，或者两者兼而有之？

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

$(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');

    }   
}