javascript - 为什么 @ID 变量在同一 元素内呈现不同的效果

Question

我正在尝试自动生成一些 javascript，即数据模型中每一行的一行，这需要将每行上的 ID 值插入到 javascript 中。

这是 HTML 页面上 script 元素内的代码:

    <script>
        $(function () {
@foreach (var item in Model) {
    var ID = item.QuestionID;
    <text>$('#toggle-off@ID-label').click(function() { $('#Question-Answer-@ID').show(); })</text>
}
        });
    </script>

输出为:

    <script>
        $(function () {
    $('#toggle-off@ID-label').click(function() { $('#Question-Answer-1').show(); })
    $('#toggle-off@ID-label').click(function() { $('#Question-Answer-2').show(); })
    $('#toggle-off@ID-label').click(function() { $('#Question-Answer-3').show(); })
...

当我期望它是:

    <script>
        $(function () {
    $('#toggle-off1-label').click(function() { $('#Question-Answer-1').show(); })
    $('#toggle-off2-label').click(function() { $('#Question-Answer-2').show(); })
    $('#toggle-off3-label').click(function() { $('#Question-Answer-3').show(); })
...

Answer 1

如果 @ID 前面有字母数字字符， Razor 引擎似乎会将 @ID 视为字符串的一部分。如果在正常工作之前添加连字符:#toggle-off-@ID-label。您可以用括号将 ID 括起来以获得预期的输出:

  <script>
        $(function () {
            @foreach (var item in Model) {
                var ID = item.QuestionID;
                <text>$('#toggle-off@(ID)-label').click(function() { $('#Question-Answer-@ID').show(); })</text>
            }
        });
  </script>