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切换功能不起作用

回答

相关问题