在jQuery中添加增量属性？
在jQuery中添加增量属性？
提问于 2014-03-01 07:19:41
我如何向每对元素(a/div)添加递增it，并在使用toogle之前单击链接时隐藏/显示div？
下面是当前的HTML和JS：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script src="js/jquery-1.4.min.js"></script>
</head>
<body>
<div class="ayuda">
<a>My help n1</a>
<div>
Content help n1
</div>
<br />
<a>My help n2</a>
<div>Content help n2</div>
</div>
<script>
var ayuda = $(".ayuda a").length; // contar el número de columnas
for (var i=0;i<ayuda;++i) // help trae la cantidad de p
{
(function(j) { // creando IDs dinámicos segúna la cantidad de columnas
$('.ayuda a').attr('id', 'mi_ayuda_'+j);
$('.ayuda a').attr('href', '#');
$('.ayuda div').attr('id', 'mi_ayuda_contenido_'+j);
$("#mi_ayuda_contenido_"+j).hide();
$("#mi_ayuda_"+j).click(function () {
window.alert(j);
$("#mi_ayuda_contenido_"+(j) ).toggle();
});
})(i);
}
</script>
</body>
</html>这是一个JSFiddle样品。
回答 3
Stack Overflow用户
回答已采纳
发布于 2014-03-01 07:27:45
使用.each()循环元素、添加ID和附加事件。
$(function() {
$(".ayuda a").each(function(i,el) {
$(el).attr('id','mi_ayuda_'+i)
.attr('href', '#')
.next()
.attr('id', 'mi_ayuda_contenido_'+i)
.hide();
$(el).click(function () {
window.alert(i);
$("#mi_ayuda_contenido_"+ i).toggle();
});
});
});JSFiddle样品
Stack Overflow用户
发布于 2014-03-01 08:29:13
不需要添加ID；不能只将事件侦听器附加到链接对象。最好在附加事件侦听器以支持动态添加的元素时始终使用.on()。
$("div.ayuda").on("click", "a", function(e) {
$(this).next("div").toggle();
});对于最初隐藏在ayuda div中的div，最好添加CSS，以避免在页面加载时隐藏这些div的混乱动画。
div.ayuda > div {
display: none;
}JSFiddle演示
Stack Overflow用户
发布于 2014-03-01 07:27:13
因为在for循环中，不只是在当前索引处获取元素，而是使所有元素与给定的选择器匹配。
你可以很容易地解决它使用
$(".ayuda a").click(function(){
$(this).next().toggle()
}).attr('href', '#').next().hide();演示：小提琴
您的代码应该类似于这
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22111420
复制相关文章
相似问题
腾讯云开发者
