gpt4 book ai didi

javascript - 使用 While 循环时显示隐藏内容

转载 作者:行者123 更新时间:2023-11-28 01:48:13 25 4
gpt4 key购买 nike

我正在构建一个页面,当用户单击按钮时,该页面将显示额外的内容。没关系,我可以使用 javascript 或 jQuery 来做到这一点。像这样的东西。

<img id="doit" src="images/button_reddot.gif" width="125" height="22">
<script>
$( "img#doit" ).click(function() {
$( "#hiddenstuff" ).show( "slow" );
});
</script>
<table id="hiddenstuff" style="display:none" class="hotelform">
<tr class="hotelformborder">
<td>Extra content</td>
</tr>
</table>

当我将该代码包装在 PHP while 循环中以多次显示它的版本时,我的问题就出现了。无论我单击哪个按钮,隐藏的内容始终会在循环的第一次渲染中显示。

当我单击第二个按钮等时,如何使隐藏内容显示在循环的第二次渲染中?

解决方案

正如 Rory 所解释的,问题在于重复使用 ids。然而,使用类也不太有效,因为只要单击一个按钮,隐藏的内容就会在循环的所有渲染中显示出来。但这确实让我的大脑朝着不同的方向运行,所以我设置了一个 $i 变量并在每个循环中递增它。然后 ids 就变成了

id="doit<?php echo $i ?>"

id="hiddenstuff<?php echo $i ?>"

问题解决了!感谢 Rory 和其他人的贡献。 StackOverflow 是一个很棒的地方。

最佳答案

问题是因为您正在使用id循环中的属性会产生多个 id,但它们必须是唯一的。尝试使用类来代替:

<img class="doit" src="images/button_reddot.gif" width="125" height="22" />
<table class="hiddenstuff" style="display:none" class="hotelform">
<tr class="hotelformborder">
<td>Extra content</td>
</tr>
</table>

您还可以将您的 <script /><head />因为一个函数可以控制循环内创建的所有元素:

<script type="text/javascript">
$(function() {
$('img.doit').click(function() {
$(this).next('.hiddenstuff').show('slow');
});
});
</script>

关于javascript - 使用 While 循环时显示隐藏内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20032676/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com