javascript - 如何使用 jQuery 隐藏

Question

我正在尝试有条件地显示/隐藏文本字段，但最初将它们全部隐藏。我已经达到了这样的程度:如果刷新页面，它就会起作用，但它最初会显示所有应该隐藏的字段: http://joelmorehouse.com/soderholminsurance/get-a-quote .

我将 jQuery 1.7.1 添加到了/wordpress/wp-content/themes/my-theme/js/中的主题。

我创建了一个名为 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 中使用的 HTML

<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]

这是怎么回事？我在某处读到将脚本放置在 header.php 的主体而不是头部，所以我这样做没有成功。我也发现了类似的帖子，但他们的问题是 ID 无效。

Answer 1

是的，devJunk 的回答很好。

此外，如果某人的连接速度稍慢，这并不是隐藏这些表单字段的最有效方法。您最终可能会出现 Accordion 效果，用户最初看到该字段，然后看到它隐藏 - 因为隐藏脚本只有在 DOM 中的所有内容(包括其他脚本)加载完毕后才会启动。这就是为什么您附加了 $(document).ready 方法。

相反，您应该使用 css 来隐藏这些字段。

而不是:

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

尝试:

#hide-auto2{
  display: none;
}