如何使用jQuery根据两个文本框中是否有内容来隐藏或显示div？
如何使用jQuery根据两个文本框中是否有内容来隐藏或显示div？
提问于 2010-08-21 03:27:16
我在一个页面上有两个文本框，它们都有"OrderEntry“类。
如果在这两个文本框中有任何文本，它将显示ID为"OrderPanel“的div。如果文本框被清除、退格或为空，它将隐藏div "OrderPanel“。
因此，页面加载，"OrderPanel“被隐藏，两个"OrderEntry”文本框都是空的。用户在任一文本框中键入单个字符，就会显示"OrderPanel“。如果两个"OrderEntry“文本框都是空的，那么div是隐藏的。
我尝试订阅$(".OrderEntry").keydown()事件，但它似乎独立地应用了这两个事件。这意味着如果其中一个是空的，而不是基于两者，它仍然会显示hide。
关于如何在jQuery中做到这一点，有什么线索吗？
回答 3
Stack Overflow用户
回答已采纳
发布于 2010-08-21 03:31:49
我想我会使用按键，但那只是我的偏好。
在keywhatever函数中，选中这两个文本框。
$( '.OrderEntry' ).keydown(function(){
var content = false;
$( 'OrderEntry' ).each(function(){
if( $( this ).val() != '' )
content = true;
});
if( content )
$( 'orderPanel' ).show();
else
$( 'orderPanel' ).hide();
});或者类似的东西
Stack Overflow用户
发布于 2010-08-21 03:30:39
你在正确的轨道上。基本上取决于选择的按键事件(keydown、keypress等)检查.OrderEntry实体的内容，而不是立即显示.OrderPanel。如果它们都有值，则显示面板，如果没有，则不显示。
编辑：
为了补充hookedonwinter's的想法-我认为OP希望面板只显示所有输入字段是否都已完成，所以我将您示例中的布尔标志反转为：
$( '.OrderEntry' ).keydown(function(){
var content = true;
$( 'OrderEntry' ).each(function(){
if( $( this ).val() == '' )
content = false;
});
if( content )
$( 'orderPanel' ).show();
else
$( 'orderPanel' ).hide();
});这样，如果任何.OrderEntry字段为空，就不会显示.OrderPanel。
Stack Overflow用户
发布于 2010-08-21 03:35:44
我会这样做：
$('.OrderEntry').change(function() {
var bothEmpty = true;
$('.OrderEntry').each(function() {
if($(this).text().length > 0) {
bothEmpty = false;
}
});
if(bothEmpty) {
$('#OrderPanel').show('slow');
} else {
$('#OrderPanel').hide('slow');
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/3534201
复制相关文章
相似问题
腾讯云开发者
