根据表单输入字段隐藏/显示 div

Question

我有一个高级搜索 div，其中包含 5 个表单输入字段。这个 div 默认是隐藏的，它是搜索表单的一部分。当用户从结果页面返回到此页面时，我希望 div 显示假设已填充 5 个字段中的任何一个。

html是

 <a class="toggle-link" onclick="ShowDiv('Adv');">+ show advanced fields</a>

  <div id="Adv" class="slide hidden">
    <form>
     <input type="text" name="first_name">
     <input type="text" name="last_name">
     <input type="text" name="street">
     <input type="text" name="town">
     <input type="text" name="country">
    </form>
    </div>

<a onclick="ShowDiv('Basic');">- hide advanced fields</a> 

隐藏/显示 div 的现有 jQuery 代码是：

function HideDiv() {
         $('.slide').hide();
     }
     function ShowDiv(ctrl) {
         HideDiv();
         $('#' + ctrl).show();
     }
     ShowDiv('Basic');  

Answer 1

如果您想在页面加载时检查表单的输入元素，这些元素包含在 div 中（id 为“Adv”），那么您应该在文档就绪事件中运行检查

$(function(){
    $("div#Adv input").each(function(){
        if($(this).val()!='')
           $(this).parent().parent().show(); // 1st parent is form, 2nd parent is Adv div 
           return;                       
    });
});

小提琴是here。

仅当您的任何输入在页面加载时填充（包含数据）时才有效。

更新您的问题后，我更新了我的小提琴here。