Question

我试图显示多个图表。

现在，我在循环中有<canvas id="pie-chart">，document.getElementById("pie-chart")只会返回带有该ID的第一个元素。如何创建动态html属性？

<table class="table">
                    <tr>
                        <th>
                            Questions
                        </th>
                    </tr>
                    @foreach (var question in (List<Testv3.Models.MyViewModel>)ViewData["questionlist"])
                    {
                        <tr>
                            <td>
                                @question.Question
                                <br />
                                <div class="chart">
                                    <canvas id="pie-chart"></canvas>
                                </div>
                            </td>
                        </tr>
                    }
</table>

我的脚本部分的一部分：

var ctx1 = document.getElementById("pie-chart").getContext("2d");

Answer 1

我不完全确定您使用什么来呈现HTML，因为您的代码对我来说看起来不像纯HTML。但是，答案保持不变，您可以使用循环索引作为id的一部分，使其唯一。像这样：

<canvas id="pie-char-@id></canvas>

带有@id的

是循环的索引。

如果您当前的渲染器不支持，您可能需要在循环外添加一个计数器，将该计数器用作您身份的一部分。然后在循环结束时增加计数器。

Answer 2

请参阅Does ID have to be unique in the whole page?

HTML Id在整个HTML实例中必须是唯一的。使用“class”而不是“id”。

我从来没有被设计为多次使用。 Id被设计为唯一标识符。

如何动态创建html id属性？

2 个答案: