JQuery不能在所有地方正常工作

Question

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

@foreach(var item in list)
{
   <div class="some-code" id="@string.Concat(\"_col_\", @item.code)">*************</div>
   <div class="view-code" [email protected]></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);
            }
        });
    })

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

Uncaught Error: Syntax error, unrecognized expression: #_col_1k]Xrm3rFs

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

Answer 1

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

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

[However更好的解决方案是完全删除生成的id属性，因为它们是一种反模式，这会使您的代码更冗长，更难维护且非常难看。而是使用DOM遍历将元素彼此关联。因为它们是兄弟姐妹，所以就像使用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">
}