我的网站上有一个 meetup.com API,可以提取事件描述。我想通过切换按钮隐藏此信息,以便在您单击“更多信息”时显示说明。
这是我用于切换按钮的 javascript:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
这是 PHP:
$ct = 1;
foreach ($my_array['results'] as $event) {
echo '<strong> ' . $event['name'] . '</strong>' . '<br />';
echo '<strong>Event link: </strong><a href="' . $event['event_url'] .'" target="_blank">' . $event['event_url'] . '</a><br />';
echo '<strong>When: </strong>' . date('Y-m-d H:i', $event['time']/1000) . '<br />' ;
// echo '<strong>More Info: </strong>' . $event['description'] . '<br />';
echo '<strong><button>More Info</button></strong><infobox>' . $event['description'] . '</infobox><br />';
$ct = $ct+1;
这是现场直播的样子:http://maddusability.com/icm505/meetups.php
如您所见,它只允许我一次显示/隐藏所有事件描述,而不是单独显示/隐藏 - 即使我为每个事件创建了一个唯一的 ID。有什么想法吗?
最佳答案
您必须使用 this
关键字和 DOM 遍历以定位正确的元素
$(document).ready(function(){
$("button").click(function(){
$(this).closest('strong').next('infobox').find("p").toggle();
});
});
仅供引用:<infobox>
对我来说似乎是无效标签?
关于javascript - 切换按钮以显示/隐藏来自 API 的数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34278085/