입력 필드에 포함 된 값을 기반으로 숨겨진 div를 표시합니다.

Question

양식이 들어있는 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;      
    }); 
}); 

Answer 1

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

Answer 2

당신은

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

Answer 3

을해야 당신이

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