Question

我尝试编写脚本来切换动态创建的<div>。

每个<div>必须有自己的按钮才能切换。

代码位于.twig文件（Symfony项目）中。

这是我的剧本：

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

这是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>

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

Answer 1

你应该使用类而不是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>

通过这种方式，您只需几行就可以处理所有切换/解释对，包括使用事件委派on()动态添加到DOM的任何div。

Answer 2

这是使用Bootstrap，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>

切换在for循环中创建的div

2 个答案: