输入字段为空时显示/隐藏div（jquery、javascript）

我有一个带有内容的

div

，默认情况下隐藏，我想在用户输入时，在输入字段

#control

中显示它

<form>
<input name="control" value="" id="control" />
<div class="show_hide">
  //some content here........
</div>
</form>

//这里有一些内容。。。。。。。。

将

输入

事件与

#控件

连接，如图所示：-

$('#control').on('input', function(){
   if($.trim(this.value) != "")
      $(this).next('div.show_hide').show();
   else
      $(this).next('div.show_hide').hide();
});

较短版本：-

$('#control').on('input', function(){
    $(this).next('div.show_hide').toggle($.trim(this.value) != "");
});

或

或者（在评论中添加@Rayon answer）

---

将

输入

事件与

#控件

连接，如图所示：-

$('#control').on('input', function(){
   if($.trim(this.value) != "")
      $(this).next('div.show_hide').show();
   else
      $(this).next('div.show_hide').hide();
});

较短版本：-

$('#control').on('input', function(){
    $(this).next('div.show_hide').toggle($.trim(this.value) != "");
});

或

或者（在评论中添加@Rayon answer）

//在输入上绑定keyup事件
$（“#控件”）.keyup（函数（）{
//如果值不为空
if（$（this）.val（）.length==0）{
//隐藏元素
$（'.show_hide'）.hide（）；
}否则{
//否则，请显示它
$（'.show_hide'）.show（）；
}
}).keyup（）；//触发keyup事件，从而在页面加载时运行处理程序

//这里有一些内容。。。。。。。。

//在输入上绑定keyup事件
$（“#控件”）.keyup（函数（）{
//如果值不为空
if（$（this）.val（）.length==0）{
//隐藏元素
$（'.show_hide'）.hide（）；
}否则{
//否则，请显示它
$（'.show_hide'）.show（）；
}
}).keyup（）；//触发keyup事件，从而在页面加载时运行处理程序

//这里有一些内容。。。。。。。。

1。在

2上绑定

输入
事件。如果在文本框中输入了任何值，则显示
，否则将其隐藏。使用
$（'#control'）。打开（'input'，function（）{…}）
1。在
2上绑定
输入
事件。如果在文本框中输入了任何值，则显示
，否则将其隐藏。使用
$（'#control'）。在（'input'，function（）{…}）
上，如果值是
'
，或仅是
$（this），则会隐藏输入。下一步（'div.show_hide'）。切换（！this.value）像@RayonDabre。。。我不认为
！此.value
将返回
bool
？如果值为
'
，或仅为
$（this）.next（'div.show\u hide'）。切换（！this.value）），是否隐藏输入像@RayonDabre。。。我不认为
！该.value
将返回
bool
？@Tushar添加了解释。我英语不好，所以我很少解释我有时解释不清楚enough@Tushar补充说明。我的英语不好，所以我很少解释我有时解释得不够清楚