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