javascript - 如何使用 JQUERY 为多个 DIVS 内的按钮编写 CLICK 函数

Question

我有这个html代码。我试图在单击按钮时显示一个表格。当按钮位于所有 div 之外时它会起作用。但是当 button 仍在内部时，我需要编写 click 事件。

这是我的 HTML 代码:

                   <div class="col-md-4 col-sm-4 col-6">
                        <div class="view overlay hm-white-slight">
                            <img src="images/doctor-new.png" class="img-fluid img-thumbnail" alt="">
                            <p><strong class="text-success">All Appointments</strong></p>
                            <button id="click" class="btn btn-success">Show</button>
                            <a >
                                <div class="mask"></div>
                            </a>
                        </div>
                    </div> 

这是我的 jquery 代码:

        <script>
            $(document).ready(function (){
                $('#appointment-table').hide();
                $('div.col-md-4 button#click').click(function (){
                    $('#appointment-table').fadeToggle('slow');
                });
            });
        </script>

但是它不起作用...有人可以帮忙吗？

Answer 1

这里没有问题，只是代码中没有 id 为 appointment-table 的元素。

JSFiddle:https://jsfiddle.net/066oodg8/

$(document).ready(function() {
  $('#appointment-table').hide();
  $('div.col-md-4 button#click').click(function() {
    $('#appointment-table').fadeToggle('slow');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="col-md-4 col-sm-4 col-6">
  <div class="view overlay hm-white-slight">
    <img src="images/doctor-new.png" class="img-fluid img-thumbnail" alt="Thumbnail Alt">
    <p><strong class="text-success">All Appointments</strong></p>
    <button id="click" class="btn btn-success">Show</button>
    <a>
      <div class="mask"></div>
    </a>
  </div>
</div>
<div id="appointment-table">
  Appointment Table
</div>

但是，由于 #appointment-table 被隐藏，您可能会注意到闪烁；为了避免这种情况，请在元素上使用 CSS display: none;，而不是使用 jQuery 隐藏它。

$(document).ready(function() {
  $('div.col-md-4 button#click').click(function() {
    $('#appointment-table').fadeToggle('slow');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="col-md-4 col-sm-4 col-6">
  <div class="view overlay hm-white-slight">
    <img src="images/doctor-new.png" class="img-fluid img-thumbnail" alt="Thumbnail Alt">
    <p><strong class="text-success">All Appointments</strong></p>
    <button id="click" class="btn btn-success">Show</button>
    <a>
      <div class="mask"></div>
    </a>
  </div>
</div>
<div id="appointment-table" style="display: none;">
  Appointment Table
</div>