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" 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 个），其余的元素，当您单击眼睛时，控制台中会出现错误，并且代码不起作用。

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

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

Answer 1

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

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

但是更好的解决方案是完全删除生成的 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">
}

JQuery 无法在任何地方正常工作

JQuery does not work correctly everywhere

html

javascript

jquery

event-handling

jquery-events