jQuery隱藏不工作，直到刷新

Question

我完全是jQuery的新手，所以請裸照我。我試圖有條件地顯示/隱藏文本字段，但最初隱藏它們。如果頁面被刷新，我已經達到了它可以工作的程度，但它最初會顯示所有應該隱藏的字段：http://joelmorehouse.com/soderholminsurance/get-a-quote。

我在/ wordpress/wp-content/themes/my-theme/js /中爲我的主題添加了jQuery 1.7.1。

我創建了一個名爲hidefieldsScript.js的腳本，並將其放入我的主題的js文件夾中：http://joelmorehouse.com/soderholminsurance/wp-content/themes/bridge/js/hidefieldsScript.js。

，我將這些代碼在身體在我的header.php頂部：

<!-- Add jquery script to support Conditional Forms--> <script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/1.7.1/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/hidefieldsScript.js"></script>

這裏是我使用的聯繫表格7

<div id="contactForm"> 
 
<h3>Get a Free Quote</h3> 
 
    <ul> 
 
    <li> 
 
     <label for="your-name">Your Name<span style="color:#ff0000;">*</span></label>[text* your-name id:your-name class:contactForm ""] 
 
    </li> 
 
    <li> 
 
     <label for="insurance-type">Type of Insurance<span style="color:#ff0000;">*</span></label>[select* insurance-type id:insurance-type include_blank class:contactForm "Auto Insurance" "Home Insurance" "Life Insurance" "Commercial Insurance" "Health Insurance" "Bond" "Other"] 
 
    </li> 
 
    <li> 
 
     <div class="hide" id="hide-auto1"> 
 
     <label for="number-of-drivers">Number of Drivers<span style="color:#ff0000;">*</span></label>[text number-of-drivers id:number-of-drivers class:contactForm ""] 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <div class="hide" id="hide-auto2"> 
 
     <label for="number-of-vehicles">Number of Vehicles<span style="color:#ff0000;">*</span></label>[text number-of-vehicles id:number-of-vehicles class:contactForm ""] 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <div class="hide" id="hide-auto3"> 
 
     <label for="currently-insured-auto">Currently Insured? (Yes/No)<span style="color:#ff0000;">*</span></label>[text currently-insured-auto id:currently-insured-auto class:contactForm ""] 
 
     </div> 
 
    </li> 
 

 
<!-- HOME INSURANCE FIELDS --> 
 

 
    <li> 
 
     <div class="hide" id="hide-home1"> 
 
     <label for="age-of-home">Age of Home<span style="color:#ff0000;">*</span></label>[text age-of-home /50 id:age-of-home class:contactForm ""] 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <div class="hide" id="hide-home2"> 
 
     <label for="dwelling-value">Dwelling Value<span style="color:#ff0000;">*</span></label>[text dwelling-value /50 id:dwelling-value class:contactForm ""] 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <div class="hide" id="hide-home3"> 
 
     <label for="owner-occupied">Owner Occupied? (Yes/No)<span style="color:#ff0000;">*</span></label>[text owner-occupied /50 id:owner-occupied class:contactForm ""] 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <div class="hide" id="hide-home4"> 
 
     <label for="new-purchase">New Purchase (If yes, please provide closing date.)<span style="color:#ff0000;">*</span></label>[text new-purchase /50 id:new-purchase class:contactForm ""] 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <div class="hide" id="hide-home5"> 
 
     <label for="currently-insured-home">Currently Insured? (Yes/No)<span style="color:#ff0000;">*</span></label>[text currently-insured-home /50 id:currently-insured-home class:contactForm ""] 
 
     </div> 
 
    </li> 
 

 
<!-- LIFE INSURANCE FIELDS --> 
 

 
    <li> 
 
     <div class="hide" id="hide-life1"> 
 
     <label for="dob-life">Date of Birth<span style="color:#ff0000;">*</span></label>[text dob-life /50 id:dob-life class:contactForm ""] 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <div class="hide" id="hide-life2"> 
 
     <label for="smoker-life">Smoker? (Yes/No)<span style="color:#ff0000;">*</span></label>[text smoker-life /50 id:smoker-life class:contactForm ""] 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <div class="hide" id="hide-life3"> 
 
     <label for="amount-desired">Amount of Insurance Desired<span style="color:#ff0000;">*</span></label>[text amount-desired /50 id:amount-desired class:contactForm ""] 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <div class="hide" id="hide-life4"> 
 
     <label for="currently-insured-life">Current Life Insurance Policy? (Yes/No)<span style="color:#ff0000;">*</span></label>[text currently-insured-life /50 id:currently-insured-life class:contactForm ""] 
 
     </div> 
 
    </li> 
 

 
<!-- COMMERCIAL INSURANCE FIELDS --> 
 

 
    <li> 
 
     <div class="hide" id="hide-com1"> 
 
     <label for="business-type">Type of Business<span style="color:#ff0000;">*</span></label>[text business-type /50 id:business-type class:contactForm ""] 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <div class="hide" id="hide-com2"> 
 
     <label for="years-in-business">Years in Business<span style="color:#ff0000;">*</span></label>[text years-in-business /50 id:years-in-business class:contactForm ""] 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <div class="hide" id="hide-com3"> 
 
     <label for="federal-id">Federal ID#<span style="color:#ff0000;">*</span></label>[text federal-id /50 id:federal-id class:contactForm ""] 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <div class="hide" id="hide-com4"> 
 
     <label for="business-description">Business Operations Description<span style="color:#ff0000;">*</span></label>[text business-description /50 id:business-description class:contactForm ""] 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <div class="hide" id="hide-com5"> 
 
     <label for="number-of-employees">Number of Employees<span style="color:#ff0000;">*</span></label>[text number-of-employees /50 id:number-of-employees class:contactForm ""] 
 
     </div> 
 
    </li> 
 

 
<!-- HEALTH INSURANCE FIELDS --> 
 

 
    <li> 
 
     <div class="hide" id="hide-health1"> 
 
     <label for="medicare">Medicare? (Yes/No)<span style="color:#ff0000;">*</span></label>[text medicare /50 id:medicare class:contactForm ""] 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <div class="hide" id="hide-health2"> 
 
     <label for="dob-health">Date of Birth<span style="color:#ff0000;">*</span></label>[text dob-health /50 id:dob-health class:contactForm ""] 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <div class="hide" id="hide-health3"> 
 
     <label for="smoker-health">Smoker? (Yes/No)<span style="color:#ff0000;">*</span></label>[text smoker-health /50 id:smoker-health class:contactForm ""] 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <div class="hide" id="hide-health4"> 
 
     <label for="deductible">Deductible<span style="color:#ff0000;">*</span></label>[text deductible /50 id:deductible class:contactForm ""] 
 
     </div> 
 
    </li> 
 

 
<!-- BOND --> 
 

 
    <li> 
 
     <div class="hide" id="hide-bond1"> 
 
     <label for="address">Address<span style="color:#ff0000;">*</span></label>[text address /50 id:address class:contactForm ""] 
 
     </div> 
 
    </li> 
 

 
<!-- OTHER --> 
 

 
    <li> 
 
     <div class="hide" id="hide-other1"> 
 
     <label for="other-types">Type(s) of Insurance<span style="color:#ff0000;">*</span></label>[text other-types /50 id:other-types class:contactForm ""] 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <div class="hide" id="hide-other2"> 
 
     <label for="description-of-coverage">Description of Coverage<span style="color:#ff0000;">*</span></label>[text description-of-coverage /50 id:description-of-coverage class:contactForm ""] 
 
     </div> 
 
    </li> 
 

 
<!-- EMAIL ADDRESS --> 
 
    <li> 
 
     <label for="your-email">Your Email Address<span style="color:#ff0000;">*</span></label>[email* your-email /50 id:your-email class:contactForm ""] 
 
    </li> 
 
    <li> 
 

 
<!-- PHONE --> 
 
    <li> 
 
     <label for="your-phone">Your Phone Number<span style="color:#ff0000;">*</span></label>[text* your-phone id:your-phone class:contactForm ""] 
 
    </li> 
 
    <li> 
 

 
<!-- ADDITIONAL NOTES --> 
 

 
     <label for="additional-notes" style="padding-top: .5em;">Additional Notes</label>[textarea* additional-notes id:additional-notes class:contactForm "Optional"] 
 
    </li> 
 
    <li> 
 
    </ul> 
 
<span style="color:#ff0000;">* = Required Field</span> 
 
</div> 
 
[submit]

的HTML

這是怎麼回事？我讀了一些地方把腳本放在header.php的頭部，而不是頭部，所以我沒有成功。我也發現了一個類似的帖子，但他們的問題是無效的ID。任何幫助將非常感激！

Answer 1

您在使用jQuery時遇到了問題，因爲您將其包含多次，一次在body中，一次在header中。當進入您的網站，控制檯顯示：

Uncaught TypeError: undefined is not a function 

兩次，一次用於

$(document).ready(function(){ 

和

$("#hide-auto1").hide(); 

第二時間，這意味着，基本上jQuery是不正確加載。考慮包括它只有一次，在主題的頁腳，身體內部，並從CDN：

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 

這是2.1.1版本，它不支持IE < 9，不過是最新的可用。

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> 

這是最新的1.x版本。 1.7.1，你正在使用的，太舊了。

Answer 2

是的，上面的答案是好的devJunk。

此外，如果某人的連接速度稍慢，這並不是隱藏這些表單域的最有效方式。您最終可能會產生手風琴效應，用戶最初看到該字段，然後看到它隱藏起來 - 因爲直到DOM中的所有內容都已加載（包括其他腳本），隱藏腳本纔會啓動。這就是爲什麼你連接了$（document）.ready方法。

而應該使用css來隱藏這些字段。而不是

：

$("#hide-auto2").hide(); 

嘗試：

#hide-auto2{ 
    display: none; 
}