Jquery ui 如何使用jquery为for循环中的每个链接显示标记？
我在for循环中有一个id为“b1”的div。此div是可单击的，当我单击此链接时，我希望显示与该div相关的标记，以显示在该特定div b1的下方。但根据我的代码，它仅显示第一个div的标记。下面是我的代码Jquery ui 如何使用jquery为for循环中的每个链接显示标记？,jquery-ui,Jquery Ui,我在for循环中有一个id为“b1”的div。此div是可单击的，当我单击此链接时，我希望显示与该div相关的标记，以显示在该特定div b1的下方。但根据我的代码，它仅显示第一个div的标记。下面是我的代码 <head> <script type="text/javascript"> <script src="http://code.jquery.com/jquery-1.10.1.js"></script> $(document).
<head>
<script type="text/javascript">
<script src="http://code.jquery.com/jquery-1.10.1.js"></script>
$(document).ready(function(){
$("#b1").click(function(){
$('#newdiv').slideToggle();
$id= $(this).attr('data-target');
$src = $('#newdiv');
$idTrg = $('#'+$id);
$src.html($idTrg.html());
});
});
</script>
<style>
#newdiv{
width:100px;
height:100px;
background-color:orange;
}
/*#newdiv:hover{
text-decoration:underline;
}*/
</style>
</head>
<body>
<?php for($i=1;$i<9; $i++): ?>
<div id="whole">
<div id="b1" data-target="<?php echo $i; ?>">Content<?php echo $i; ?></div>
<div id="newdiv" style="display:none" ></div>
</div>
<?php endfor; ?>
<?php for($j=1;$j<9; $j++): ?>
<div id="<?php echo $j ;?>" style="display:none">
Main contents<?php echo $j; ?>
<div id="another">Inside Another one<?php echo $j; ?></div>
</div>
<?php endfor; ?>
</body>
$（文档）.ready（函数（）{
$（“#b1”）。单击（函数（）{
$（'#newdiv'）。滑动切换（）；
$id=$（this.attr（'data-target'）；
$src=$（'newdiv'）；
$idTrg=$（“#”+$id）；
$src.html（$idTrg.html（））；
});
});
#纽迪夫{
宽度：100px；
高度：100px；
背景颜色：橙色；
}
/*#newdiv：悬停{
文字装饰：下划线；
}*/
首先，您需要验证生成的HTML（）。不能在另一个脚本中包含脚本元素
ID在HTML文档中必须是唯一的，jQuery有一个内置的“修复程序”，因此选择一个ID将始终只返回一个元素。通过将div
放在循环中，它会在生成的HTML代码中多次输出（在浏览器中查看生成的源代码）
必须用类替换ID
此外，$（'#newdiv'）
（或$（'.newdiv'）
如果使用类）将选择具有该ID/类的任何/所有元素，而不是单击元素旁边的元素。您可以使用.next（）
来查找它
最后，一些通用代码风格的建议：
- 使用更好的ID/类名<代码>b1
没有任何意义。你把“源”和“目标”的意思互换了
使用var
声明所有变量，否则它们将是全局变量
不要在所有变量前面加$
。有些人将$
前缀用于保存jQuery对象的变量，这是可以的（但不推荐），但对于其他变量来说肯定没有意义
更清晰地缩进代码，使其可读性更好
$（文档）.ready（函数（）{
$（“.b1”）。单击（函数（）{
var$target=$（this.next（）；
$target.slideToggle（）；
var id=$（this.attr（'data-target'）；
$src=$（“#”+id）；
$target.html（$src.html（））；
});
});
纽迪夫先生{
宽度：100px；
高度：100px；
背景颜色：橙色；
}
首先，您需要验证生成的HTML（）。不能在另一个脚本中包含脚本元素
ID在HTML文档中必须是唯一的，jQuery有一个内置的“修复程序”，因此选择一个ID将始终只返回一个元素。通过将div
放在循环中，它会在生成的HTML代码中多次输出（在浏览器中查看生成的源代码）
必须用类替换ID
此外，$（'#newdiv'）
（或$（'.newdiv'）
如果使用类）将选择具有该ID/类的任何/所有元素，而不是单击元素旁边的元素。您可以使用.next（）
来查找它
最后，一些通用代码风格的建议：
- 使用更好的ID/类名<代码>b1
没有任何意义。你把“源”和“目标”的意思互换了
使用var
声明所有变量，否则它们将是全局变量
不要在所有变量前面加$
。有些人将$
前缀用于保存jQuery对象的变量，这是可以的（但不推荐），但对于其他变量来说肯定没有意义
更清晰地缩进代码，使其可读性更好
$（文档）.ready（函数（）{
$（“.b1”）。单击（函数（）{
var$target=$（this.next（）；
$target.slideToggle（）；
var id=$（this.attr（'data-target'）；
$src=$（“#”+id）；
$target.html（$src.html（））；
});
});
纽迪夫先生{
宽度：100px；
高度：100px；
背景颜色：橙色；
}
标记用于“整体”或“新div”？“新div”的标记。“新div”是“整体”中的一个div，其样式为“无显示”，仅当单击相应的“b1”div时才会显示。标记用于“整体”或“新div”？对于“newdiv”。“newdiv”是“整体”中的一个div，它的样式为“无显示”，只有在单击相应的“b1”div时才会显示。哇，效果非常好。谢谢您的解释。我是jquery新手，刚刚编写了一个快速代码来查看输出，tats为什么id和类名都是垃圾，但我理解标准名称有助于更好地理解代码。谢谢你的帮助！哇，这真的很好。谢谢你的解释。我是jquery新手，刚刚编写了一段快速代码来查看输出，解释了为什么id和类名都是垃圾，但我理解标准名称有助于更好地理解代码。谢谢你的帮助！
<head>
<script src="http://code.jquery.com/jquery-1.10.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".b1").click(function(){
var $target = $(this).next();
$target.slideToggle();
var id = $(this).attr('data-target');
$src = $('#'+id);
$target.html($src.html());
});
});
</script>
<style>
.newdiv{
width:100px;
height:100px;
background-color:orange;
}
</style>
</head>
<body>
<?php for($i=1;$i<9; $i++): ?>
<div class="whole">
<div class="b1" data-target="<?php echo $i; ?>">Content<?php echo $i; ?></div>
<div class="newdiv" style="display:none" ></div>
</div>
<?php endfor; ?>
<?php for($j=1;$j<9; $j++): ?>
<div id="<?php echo $j ;?>" style="display:none">
Main contents<?php echo $j; ?>
<div class="another">Inside Another one<?php echo $j; ?></div>
</div>
<?php endfor; ?>
</body>