2012-03-23 46 views
1

我對包含表單的div有以下標記。該表格有一個基本的搜索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;      
    }); 
}); 

回答

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

這似乎是工作。現在唯一的問題是,當顯示div時,+ show advanced fields也是如此。需要在你的代碼中添加什麼,所以當div顯示時,類=「toggle-link」隱藏起來 – gek 2012-03-23 10:57:07

+0

@ aa1。我將它添加到答案中。 – gdoron 2012-03-23 12:26:15

0

你應該做

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

嗯,似乎沒有任何工作。 div#Adv仍然隱藏。 – gek 2012-03-23 10:49:07

+1

@ aa1這是trange,因爲它在這裏工作http://jsfiddle.net/RYNRQ/你把這個代碼放在$(document).ready()裏面嗎? – 2012-03-23 10:55:15

+0

是的,我做到了。現在我已經將腳本的位置移到我的頁面上的其他一些現有腳本之前,並且它也可以工作。謝謝 – gek 2012-03-23 11:02:33

0

我相信你缺少一些支架有

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

我已經將您的代碼完全複製到了我的頁面上,但無論如何div div仍然隱藏。我放置這些代碼的位置是否重要?目前它包含在我的頁面底部,而隱藏/顯示腳本是從外部文件引用的。 – gek 2012-03-23 10:44:27

+1

如果你想顯示'#Adv',使用'$(this).parent()。show()'而不是'$(this).parent()。parent()。show()' – slash197 2012-03-23 10:52:34

相關問題