Question

我正在构建一个页面，当用户单击按钮时会显示额外的内容。我可以用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循环中包装该代码以多次显示它的版本时，我的问题出现了。无论我点击哪个按钮，隐藏的内容总是在循环的第一次渲染中显示。

当我点击第二个按钮等时，如何在循环的第二次渲染中显示隐藏的内容？

解

正如罗里解释的那样，问题在于重复使用ID。然而，当单击一个按钮时，使用类也不能正常工作，因为隐藏内容在循环的所有渲染中都显示出来。这确实让我的大脑在不同的方向上运行，所以我设置了一个$ i变量，并在每个循环中增加它。然后ids成了

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

和

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

问题解决了！感谢Rory和其他人的贡献。 StackOverflow是一个了不起的地方。

Answer 1

问题是因为您在循环中使用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>

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

1 个答案: