Question

我在页面上有两个文本框，它们都有“OrderEntry”类。

我希望如此，如果这些文本框中的任何一个文本框中有任何文本，它将显示ID为“OrderPanel”的div。如果文本框被清除，退格或空，它将隐藏div“OrderPanel”。

因此，页面加载，“OrderPanel”被隐藏，两个“OrderEntry”文本框都为空。用户在其中一个文本框中键入单个字符，并显示“OrderPanel”。如果“OrderEntry”文本框中的两个都为空，则隐藏div。

我尝试订阅$（“。OrderEntry”）。keydown（）事件，但它似乎独立地应用了两者。这意味着如果一个是空的而不是基于两者，它仍会显示隐藏？

有关如何在jQuery中执行此操作的任何线索？

Answer 1

我认为我会使用按键，但这只是我的偏好。

在keywhatever函数中，检查两个文本框。

$( '.OrderEntry' ).keydown(function(){
    var content = false;
    $( 'OrderEntry' ).each(function(){
        if( $( this ).val() != '' )
            content = true;
    });
    if( content )
        $( 'orderPanel' ).show();
    else
        $( 'orderPanel' ).hide();
});

或类似的东西

Answer 2

你走在正确的轨道上。基本上在选择的关键事件（keydown，keypress等）而不是立即显示.OrderPanel时，请检查.OrderEntry实体的内容。如果它们都有值，则显示面板，如果没有，则不显示。

修改

要添加到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。

Answer 3

我会做这样的事情：

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

如何使用jQuery基于两个文本框中的内容隐藏或显示div？

3 个答案: