Question

我有这个table代码。我在点击button时尝试显示divs。当按钮位于所有click event之外时，它可以正常工作。但是当button仍然在里面时，我需要写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>代码：

tableHTML

但它没有用......有人可以帮忙吗？

Answer 1

此处没有问题，除了您的代码中没有ID为appointment-table的元素。

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何使用JQUERY为许多DIVS内的Button编写CLICK函数

1 个答案: