Question

如何在每个元素对（a / div）中添加递增ID，并在使用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 Sample。

Answer 1

使用.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 Sample

Answer 2

无需添加ID;你不能只是将事件监听器附加到链接对象。最好在附加事件侦听器时始终使用.on()以支持动态添加的元素。

$("div.ayuda").on("click", "a", function(e) {
  $(this).next("div").toggle();
});

最初将div隐藏在ayuda div中，最好添加CSS以避免在页面加载时隐藏这些div的混乱动画。

div.ayuda > div {
  display: none;
}

JSFiddle Demo

Answer 3

因为在for循环中，不是仅仅定位当前索引处的元素，而是指向与给定选择器匹配的所有元素

您可以使用

轻松解决问题

$(".ayuda a").click(function(){
    $(this).next().toggle()
}).attr('href', '#').next().hide();

演示：Fiddle

您的代码应该看起来像this

在jQuery中添加增量属性？

3 个答案: