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 個），其余元素，當您單擊眼睛時，控制台中會出現錯誤並且代碼不起作用。

未捕獲的錯誤：語法錯誤，無法識別的表達式：#_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">
}