单击动态按钮后未显示的信息(使用切换)
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了单击动态按钮后未显示的信息(使用切换)相关的知识,希望对你有一定的参考价值。
我在点击“更多信息”按钮后尝试显示一些其他信息。
首先,div是根据我的数据库动态生成的。哪个div包含“更多信息”按钮,单击该按钮时应显示更多信息。但是,只有第一个按钮有效,单击时,会显示所有生成的div中的所有“更多信息”。
我想只有与我点击的div相关的更多信息才能显示/隐藏,而其他人仍然隐藏。
<div id="event_info">
<img src= "<?php echo $row['img'];?> "/>
<div class="event_description">
<h1><?php echo $row['gathering_name'];?></h1>
<b>Hosted By:</b> <?php echo $row['event_host'];?> </br>
<b>Location:</b> <?php echo $row['city'].', '. $row['state']; ?></br>
<b>Date:</b> <?php $event_date = strtotime($row['event_start']);
echo date("F jS, Y" , $event_date);?></br></br>
<!-- MORE INFO ABOUT THE GATHERINGS -->
<button class="findButton2" id="<?php echo $row['id'];?>">MORE INFO</button>
<div id="<?php echo $row['id'];?>" class="event_moreinfo">
<?php echo $row['description'];?></br>
<b>Gym Name: </b> <?php echo $row['gym_name'];?> </br>
<b>Gym Address: </b> <?php echo $row['street_address'];?></br>
<?php echo $row['city'].', '.$row['state'].', '. $row['country'];?></br>
<b>Nearest Airport: </b> <?php echo $row['nearest_airport'];?></br>
<b>Expected Attendance: </b> <?php echo $row['attendance']; ?></br>
<b>Average Ticket Cost: </b> <?php echo $row['event_cost']; ?> </br>
<b>Contact: </b> <a href = "mailto:<?php echo $row['host_email'];?>"> Host Email</a>
</div>
</div>
</div>
这是我的脚本(jQuery)
$(document).ready(function() {
var event_id = $(".findButton2").attr("id");
$('#' + event_id).on('click', function() {
$(".event_moreinfo").toggle(1000);
});
});
答案
这是因为所有动态div都具有相同的类名event_moreinfo
。使用this
和next
来toogle
你的div
如下。当点击按钮时,它只会切换下一个具有类event_moreinfo
的div。
$(document).ready(function() {
var event_id = $(".findButton2").attr("id");
$('#' + event_id).on('click', function() {
$(this).next(".event_moreinfo").toggle(1000);
});
});
另一答案
多个元素具有相同的ID,而ID应该是唯一的。我想这对于整个文档都是如此,也是您的代码可能无法按预期工作的原因之一。此外,您正在动态生成div,因此您最好委托绑定一个祖先,以确保触发任何子div上的任何单击。让我们说所有这些div都是<div class=“event_table”>
元素的直接子元素
$(‘.event_table’).on(‘click’, ‘.event_info’, function () {
$(‘this’).find(‘.event_moreinfo’).toggle(1000);
});
将能够正确识别用户点击的元素。
有关JQuery official documentation问题的更多信息
以上是关于单击动态按钮后未显示的信息(使用切换)的主要内容,如果未能解决你的问题,请参考以下文章