Question

我正在做一个项目，我从JSON文件中收集数据并在我的网页上显示一些内容。我从JSON文件中获取信息，并使用列表标记上的循环在我的网页上显示数据。列表标签基本上有一个折叠按钮和显示信息的div。我已经能够正确地获取我的数据，这不是问题所在。问题是，当我单击列表中显示信息的数据切换按钮时，它们全部仅显示第一个列表项的折叠。有关如何解决此问题的任何建议吗？

这是我的代码：

<ul id="talk-display">
    {{#each model as |board|}}
    <li>
        <button data-toggle="collapse" data-target="#talk-answer" class="btn" id="talk-question">
            <span class="glyphicon glyphicon-menu-down" style="float:left"></span>
            {{board.question}}
            <br>
            <span id="talk-name">By {{board.name}}</span>
        </button>

        <div id="talk-answer" class="collapse">
            <button class="btn" id="talk-reply">Reply</button>
            <p id="talk-response">{{board.response}}</p>
        </div>
    </li>
    {{/each}}
</ul>

Answer 1

您的问题是html id 应该是唯一的。但是，您在循环中多次重复使用id talk-name，因此会中断。

假设您的主板上有一个独特的id，可以通过以下方式进行简单的修复：

<ul id="talk-display">
    {{#each model as |board|}}
    <li>
        <button data-toggle="collapse" data-target={{concat "#talk-answer" board.id}} class="btn" id={{concat "talk-question" board.id}}>
            <span class="glyphicon glyphicon-menu-down" style="float:left"></span>
            {{board.question}}
            <br>
            <span id={{concat "talk-name" board.id}}>By {{board.name}}</span>
        </button>

        <div id={{concat "talk-answer" board.id}} class="collapse">
            <button class="btn" id={{concat "talk-reply" board.id}}>Reply</button>
            <p id={{concat "talk-response" board.id}}>{{board.response}}</p>
        </div>
    </li>
    {{/each}}
</ul>

但是，由于您正在使用ember，我强烈建议您不要使用bootstrap javascript功能，而是使用ember实现它。

显示从使用循环生成的列表中折叠仅适用于第一个列表项

1 个答案: