根据输入字段中包含的任何值显示隐藏的div

时间:2012-03-23 10:34:47

标签: jquery input show-hide

我有一个包含表格的div的以下标记。表单有一个基本的搜索div和一个高级div。

 <div class="form">
     <form>
         <input type="text" name="first_name">
         <input type="text" name="last_name">

       <div class="Basic" class="slide">
         <input type="text" name="location"> 
       </div>

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

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

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

隐藏/显示基于以下脚本运行:

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

我的问题(这是一个基于我从未设法开始工作的现有问题的跟进票)是我想要一个用户,当他返回到这个搜索表单时,如果他有高级div打开首先使用高级搜索表单。因此,如果任何输入字段包含任何数据值,则当用户返回页面时,div应该打开。

到目前为止我有这个代码,但它不起作用。

   $(document).ready(function () {

     $(function(){
       $("div#Adv input").each(function(){
           if($(this).val()!='')
              $(this).parent().parent().show();
              return;                       
  });
 });

3 个答案:

答案 0 :(得分:1)

$(function(){
    if($("#Adv input[value!='']").length){
        $('#Adv').show();
        $('a.toggle-link').hide();
    }
});

答案 1 :(得分:0)

你应该做

   $("div#Adv input").each(function(){
       if(this.value !== ''){
          //get the first ancestor with class=slide and show it
          $(this).closest('.slide').show();
          return;
        }
    });

答案 2 :(得分:0)

我相信你错过了一些括号

$(document).ready(function(){
     $(function(){
       $("div#Adv input").each(function(){
           if($(this).val()!='')
           {
              $(this).parent().parent().show();
              return;
           }
     });
});