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

标签 javascript jquery html jquery-selectors

我有这个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>

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

最佳答案

这里没有问题,只是代码中没有 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>

关于javascript - 如何使用 JQUERY 为多个 DIVS 内的按钮编写 CLICK 函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46714101/

相关文章:

javascript - 为对象javascript分配参数值

javascript - 在新标签页中打开时自动播放幻灯片不起作用

javascript - 使用 jQuery 选择具有特定类的元素的正确方法是什么

javascript - 使用 JavaScript 每半秒更改页面上的文本

javascript - JQuery if 语句不起作用(AJAX/PHP)

javascript - Eloquent Javascript 第 4 章 : arrayToList/listToArray Execise

javascript - Highcharts x 轴上的 31 天

jquery - 将事件绑定(bind)到选定的 select

html - Chart.js 中的自定义工具提示样式

javascript - e.dataTransfer.files.length 显示为 0