jquery切換功能不起作用

-2

我正在製作一個窗體，它在按鈕的幫助下切換（隱藏並顯示），但它不起作用。任何人都可以請檢查我的代碼，並告訴我爲什麼我的腳本不工作。我的代碼如下jquery切換功能不起作用

$(document).ready(function() { 
 
     $("#add_facility").click(function() { 
 
      $("#facility-form").toggle('slow'); 
 
     }); 
 
    }); 
 
\t

\t .facility-form { 
 
     background-color: #e3edfa; 
 
     padding: 4px; 
 
     cursor: initial; 
 
     display: none; 
 
    }

<button class="btn" id="add_facility"> 
 
    <i class="fa fa-plus" aria-hidden="true"></i> 
 
    Add Facilities 
 
</button> 
 
<div class="facility-form"> 
 
    <form id="facility-form1"> 
 
     <div class="row"> 
 
      <div class="col-md-4"> 
 
       <div class="checkbox"> 
 
        <label> 
 
         <input type="checkbox" value="">Internet 
 
        </label> 
 
       </div> 
 
       <div class="checkbox"> 
 
        <label> 
 
         <input type="checkbox" value="">Bar 
 
        </label> 
 
       </div> 
 
      </div> 
 
      <div class="col-md-4"> 
 
       <div class="checkbox"> 
 
        <label> 
 
         <input type="checkbox" value="">Free Wifi 
 
        </label> 
 
       </div> 
 
       <div class="checkbox"> 
 
        <label> 
 
         <input type="checkbox" value="">Spa 
 
        </label> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </form> 
 
</div>

來源

2016-10-04 wali

請閱讀[如何格式化我的代碼塊？]（http://meta.stackoverflow.com/questions/251361/how-do-i-format-my-code-blocks） – Liam

請注意format你的問題正確。這幾乎是不可讀的 –

*不工作*如何？ – Liam

你被id選擇，但你的窗體有一個class，不是id;看到***：

$(document).ready(function() { 
 
    $("#add_facility").click(function() { 
 
    $(".facility-form").toggle('slow'); // *** 
 
    }); 
 
});

.facility-form { 
 
    background-color: #e3edfa; 
 
    padding: 4px; 
 
    cursor: initial; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<button class="btn" id="add_facility"> 
 
    <i class="fa fa-plus" aria-hidden="true"></i> Add Facilities 
 
</button> 
 
<div class="facility-form"> 
 
    <form id="facility-form1"> 
 
    <div class="row"> 
 
     <div class="col-md-4"> 
 
     <div class="checkbox"> 
 
      <label> 
 
      <input type="checkbox" value="">Internet 
 
      </label> 
 
     </div> 
 
     <div class="checkbox"> 
 
      <label> 
 
      <input type="checkbox" value="">Wifi 
 
      </label> 
 
     </div> 
 
     <div class="checkbox"> 
 
      <label> 
 
      <input type="checkbox" value="">Bar 
 
      </label> 
 
     </div> 
 
     </div> 
 
     <div class="col-md-4"> 
 
     <div class="checkbox"> 
 
      <label> 
 
      <input type="checkbox" value="">Free Wifi 
 
      </label> 
 
     </div> 
 
     <div class="checkbox"> 
 
      <label> 
 
      <input type="checkbox" value="">Spa 
 
      </label> 
 
     </div> 
 
     <div class="checkbox"> 
 
      <label> 
 
      <input type="checkbox" value="">Parking 
 
      </label> 
 
     </div> 
 
     </div> 
 
     <div class="col-md-4"> 
 
     <div class="checkbox"> 
 
      <label> 
 
      <input type="checkbox" value="">Indoor Pool 
 
      </label> 
 
     </div> 
 
     <div class="checkbox"> 
 
      <label> 
 
      <input type="checkbox" value="">Family Rooms 
 
      </label> 
 
     </div> 
 
     <div class="checkbox"> 
 
      <label> 
 
      <input type="checkbox" value="">Smoking Rooms 
 
      </label> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </form> 
 
</div>

來源

2016-10-04 12:42:29

這是錯誤

$("#facility-form").toggle('slow');

變化

$(".facility-form").toggle('slow');

來源

2016-10-04 12:41:56 buildok

爲什麼？你應該解釋你的答案 – Liam

Man只是犯了一個錯誤，他完全瞭解jQuery中的選擇器 – buildok

您需要使用類選擇不是一個ID選擇

改變這一行的，

$("#facility-form").toggle('slow');

要

$(".facility-form").toggle('slow');

這裏是一個工作小提琴：https://jsfiddle.net/pz6h4g7q/

希望這有助於！

來源

2016-10-04 12:42:45

更改此：

$("#facility-form").toggle('slow');

到

$(".facility-form").toggle('slow');

設施形式是一類，而不是一個ID。

來源

2016-10-04 12:42:47 Goombah

jquery切換功能不起作用

回答

相關問題