如何动态创建html id属性？

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是循环的索引。

如果您的当前呈现程序不支持这一点，您可能希望在循环之外添加一个计数器，使用该计数器作为您的id的一部分。然后在循环结束时增加计数器。

Answer 2

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

HTML Id需要在整个HTML实例中是唯一的。用"class“代替"id”。

Id是而且从来没有设计为可多次使用。Id设计为唯一标识符。