Javascript 切换在for循环中创建的div

我正在尝试编写一个脚本来切换动态创建的

每个

必须有自己的按钮进行切换

代码位于

.twig

文件（Symfony项目）中

这是我的剧本：

<script language="JavaScript">
$( function () {
    $('#toggle').click(
        function () {
            $("#explanation").fadeToggle("fast");
        });
    });
</script>

$（函数（）{
$（“#切换”）。单击(
函数（）{
$（“解释”）.fadeToggle（“快速”）；
});
});

这是for循环中的代码：

<div>
    <a id="toggle" class="tip maximize-all" data-toggle="tip" data-title="Maximize All"
        href="javascript:void(0);">
        {% trans %} details {% endtrans %}
    </a>
</div>

<div id="explanation" style="display: none;">
    Hello world!
</div>

你好，世界！

---

我需要帮助编写脚本而不是循环。

您应该使用类，而不是id，因为页面中不能有重复的id。我在这里做了这些改变-

<div>
    <a class="toggle" class="tip maximize-all" data-toggle="tip" data-title="Maximize All"
        href="javascript:void(0);">
        {% trans %} details {% endtrans %}
    </a>

</div>

<div class="explanation" style="display: none;">
    Hello world!
</div>

你好，世界！

现在您可以将jQuery更改为这样，使用DOM遍历查找正确的div-

<script language="JavaScript">
$( function () {
    $('body').on('click', '.toggle', 
        function () {
            $(this).parent().next('.explanation').fadeToggle('fast');
        });
    });
</script>

$（函数（）{
$（'body'）。在（'click'，'toggle'，上，
函数（）{
$（this.parent（）.next（'.explainion'）.fadeToggle（'fast'）；
});
});

---

这样，您只需几行就可以处理所有的切换/解释对，包括使用事件委派动态添加到DOM中的任何div（）

这是使用引导、Symfony、Twig的正确代码：

<div class="accordion" id="collapse-group">
    <a data-parent="#collapse-group" href="#collapse{{ loop.index }}" data-toggle="collapse">
                            Label_Button
    </a>
    <div class="collapse" id="collapse{{ loop.index }}">
        Text
    </div>
</div>

正文

似乎效果不错：我认为OP计划在循环中添加div，并且需要能够与它们交互。请简化问题以完全确定问题。