Question

我试图在下面的while循环中使用Javascript，但它只适用于第一次迭代。从阅读其他帖子我感觉它与ID有关，但我真的不明白。

继承我的代码：

<html>
<head>


</head>

<body>

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>

<style type="text/css">
      #wrapper {
      background: #ccc;
      display:none
      }
</style>

<script type="text/javascript">//<![CDATA[
$(window).load(function(){
$('#button').click(function(){
    $('#wrapper').toggle();
})
});//]]> 
</script>

<?php
$x = 5;
while($x > 0)
{
?>
<button id="button">ExP</button>
<div id="wrapper" class="open" style="display: none;">
  <ul id="list">
    <li>Item</li>
  </ul>
</div>
<?php
$x = $x-1;
}
?>

</body>
</html>

非常感谢任何建议。

谢谢：）

Answer 1

ID是唯一的：

一个元素只能有一个ID
一个页面只能有一个具有该ID的元素

您不能使用$('#button')或$('#wrapper')，因为它们不是唯一的。

您可以使用button0，button1，button5等作为ID。例如：

<button id="button<?php echo $x; ?>">

您也可以使用类而不是ID，因为它们不需要是唯一的。

同样适用于list。

Answer 2

如评论中所述，您需要唯一的ID。或者，您可以使用类来修复此

	$(function() {
		$('.button').on('click', function(e) {
			e.preventDefault();
			$(this).next().toggle();
		});
	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<?php
	for($i=0;$i<5;$i++) {
?>	
	<button class="button">ExP</button>
	<div style="display: none;">
		<ul>
			<li>Item</li>
		</ul>
	</div>
<?php
	}
?>

Answer 3

使用class而不是id。

</head>

<body>

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>

<style type="text/css">
      .wrapper {
      background: #ccc;
      display:none
      }
</style>

<script type="text/javascript">//<![CDATA[
$(window).load(function(){
$('.button').click(function(){
    $(this).next('.wrapper').toggle();
})
});//]]> 
</script>

<?php
$x = 5;
while($x > 0)
{
?>
<button class="button">ExP</button>
<div class="wrapper" class="open" style="display: none;">
  <ul id="list">
    <li>Item</li>
  </ul>
</div>
<?php
$x = $x-1;
}
?>

</body>
</html>

循环

3 个答案: