根据输入字段中包含的任何值显示隐藏的div [英] Show hidden div based of any value contained in the input field

问题描述

我对包含表单的div进行了以下标记.该表格有一个基本的搜索div和一个高级div.

I have the following mark up of a div that contains a form. The form has a basic search div and an advanced 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>

隐藏/显示基于以下脚本起作用:

The hide/show is functioning based on the following script:

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

我的问题(这是基于一个我从未设法解决的现有问题的跟进票)是我希望用户返回此搜索表单时，如果他的高级div打开，则向他展示首先使用高级搜索表单.因此，如果任何输入字段包含任何数据值，则当用户返回页面时div应该打开.

My problem (and this is a follow up ticket based on an existing question that I never managed to get to work) is that I want a user when he returns to this search form to be presented with the advanced div open if he used the advanced search form in the first place. So if any of the input fields contain any data values the div should be open when the user returns to the page.

到目前为止，我已经有了这段代码，但是它不起作用.

I have this code so far but it doesn't work.

   $(document).ready(function () {

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

推荐答案

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

这篇关于根据输入字段中包含的任何值显示隐藏的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！