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

Question

我有这个html代码。 我试图在单击button时显示table 。 当button位于所有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>