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

Question

我有这个 html 代码。单击 button 时，我试图显示 table。当按钮在所有 divs 之外时它起作用。但是我需要在 button 还在里面的时候写 click event。

这是我的 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>

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

How to write CLICK function for a Button inside many DIVS using JQUERY

html

javascript

jquery

jquery-selectors