如果另一个div中的3个输入文本字段不为空，如何使用jQuery显示隐藏的div？

问题描述

| 我有一个div，它使用hide（）在加载DOM时是隐藏的。

    <div class=\"disappear\">
    Some text appears here
    </div>

当类.master（一到三个）的输入字段不为空时，如何显示以上div（.disappear）。 （理想情况下，在每个输入字段中的.blur上触发它。）

    <div id=\"form\">
    <form>
    <input type=\"text\" name=\"one\" class=\"master\">
    <input type=\"text\" name=\"two\" class=\"master\">
    <input type=\"text\" name=\"three\" class=\"master\">
    <input type=\"text\" name=\"four\" class=\"slave\">
    <input type=\"text\" name=\"five\" class=\"slave\">
    </form>
    </div>

提前致谢！     

解决方法

我想是这样的：

$(\'.master\').change(function() {
    if ($(\'.master\').filter(function() {
        return !this.value;
    }).length) {
        // some are empty
        $(\'.disappear\').hide();
    } else {
        // none are empty
        $(\'.disappear\').show();
    }
});

jsFiddle。请注意，我使用

change

而不是

blur

，因为从语义上讲这是您的意思，并且它会更快。     ,您将在某个事件处理程序中执行此操作。

function YourEventHandler()
{
  var v1=$.trim($(\"#one\").val());
  var v2=$.trim($(\"#two\").val());
  var v3=$.trim($(\"#three\").val());
  if(v1 !== \'\' && v1 !== undefined && v2 !== \'\' && v2 !== undefined v3 !== \'\' && v3 !== undefined)
  $(\".disappear\").show();
  else $(\".disappear\").hide();
}

我没有使用.master，因为您可能在其他元素中使用了该类。 如果没有，您也可以使用它。 试试看，让我知道。     ,试试这个（这也将检查是否为空）

$(\'input.master\').live(\'blur change\',function () {
    var trimVal = $.trim($(this).val());
    if(!trimVal.length)
    {
        $(\'.disappear\').show();
    }
    else {
         $(\'.disappear\').hide();
    }   
});

工作演示     ,这个jsfiddle应该完成http://jsfiddle.net/dxpbT/

$(\".master\").blur(function() {
    if ($(this).val().length > 0) {
        var $all = $(\'.master\');
        var $empty = $all.filter(\'[value=\"\"]\');

        if ($empty.length == 0) {
            $(\".disappear\").show();
        }    
    }

});