时间戳

首页 > 解决方案 > 切换按钮似乎不起作用？

javascript - 切换按钮似乎不起作用？

问题描述

嗨，我确定我已经按照教程中的步骤正确编写了此代码。我希望单击#booking 按钮，它应该“切换”#btn 元素消失。本质上是一个包含汽车信息的框，当用户单击“单击此处预订”时，它应该打开表单。但由于某种原因，它没有。我认为这可能与 CSS 有关，但我不确定。

对此有什么建议吗？

          <div class="form-wrapper">
                <form action="#">
                    <label for="name">Name*</label>
                    <input placeholder="Your Name" class="full" type="text"id="name">
                    <br>
                    <label for="email">Email</label>
                    <input placeholder="Your Email" class="full" type="text"id="name">
                    <br>
                    <label for="hire-start-date">Hire Start Date</label>
                    <input type="date" id="depart">
                    <br>
                    <label for="hire-end-date">Hire End Date</label>
                    <input type="date" id="depart">
                    <br>
               
                    <button class="book-now">Book Now</button>
                </form>
            </div>

            <div class="car-info" id="btn">  
                <button id="booking-button">Click Here to Book</button>

            </div>
        </div>

$(document).ready(function() {

    $('#booking-button').on('click', () => 
    { $('#btn').toggle(); });

});

标签： javascripthtmljquerycss

解决方案

现在，当用户单击时表单出现Click Here to Book，而此按钮消失。

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-wrapper">
  <form action="#" id="car-info" style="display: none;">
      <label for="name">Name*</label>
      <input placeholder="Your Name" class="full" type="text"id="name">
      <br>
      <label for="email">Email</label>
      <input placeholder="Your Email" class="full" type="text"id="name">
      <br>
      <label for="hire-start-date">Hire Start Date</label>
      <input type="date" id="depart">
      <br>
      <label for="hire-end-date">Hire End Date</label>
      <input type="date" id="depart">
      <br>

      <button class="book-now">Book Now</button>
  </form>
</div>

<div id="btn">  
  <button id="booking-button">Click Here to Book</button>
</div>
<script>
  $(document).ready(function() {
    $('#booking-button').on('click', () => {
      $('#car-info').toggle();
      $('#btn').toggle();
    });
  });
</script>

推荐阅读