2

我正在开发一个关于 Asp.Net Core 的小项目。我有一段自动生成的 HTML 代码：

@foreach(var item in list)
{
   <div class="some-code" id="@string.Concat(\"_col_\", @item.code)">*************</div>
   <div class="view-code" id=@item.code></code>
}

事实上，当这段代码运行时，它在浏览器元素中看起来是这样的： 

  <div class="some-code" id="_col_t5]y56plK3">*************</div>
  <div class="view-code" id="t5]y56plK3"></code>

  <div class="some-code" id="_col_ye00c8dpo">*************</div>
  <div class="view-code" id="ye00c8dpo"></code>
  ...

在图片中它看起来像这样：

在此处输入图像描述

逻辑是当你点击眼睛时，星星会变成代码，反之亦然。我使用一个小脚本做到了这一点：

$(document).ready(function () {
        $(".view-code").on("click", function (e) {
            var mt = "*************"
            var id = "#_col_" + e.target.id;
            if ($(id).text() === mt) {
                $(id).text(e.target.id);
            } else {
                $(id).text(mt);
            }
        });
    })

因此，对于几个元素（前 2 个）和其余元素，当您单击眼睛时，控制台中会出现错误并且代码不起作用。

未捕获的错误：语法错误，无法识别的表达式：#_col_1k]Xrm3rFs

告诉我为什么会这样？如何做到这一点，一切正常？

4

1 回答 1

2

jQuery 选择器字符串中的]字符有特殊含义，需要转义：\\]

var id = "#_col_" + (e.target.id.replace(/]/g, '\\]');

然而，更好的解决方案是id完全删除生成的属性，因为它们是一种反模式，这会使您的代码更冗长、更难维护并且简直丑陋。相反，使用 DOM 遍历将元素相互关联。因为他们是兄弟姐妹，所以就像 using 一样简单prev()，如下所示：

jQuery(function($) {
  $(".view-code").on("click", function(e) {
    $(this).prev('.some-code').text((i, t) => t == mt ? this.id : mt;
  });
})

@foreach(var item in list) {
  <div class="some-code">*************</div>
  <div class="view-code" id="@item.code">
}
于 2020-02-05T16:23:32.230 回答