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>
  ...

In картинка выглядит следующим образом:

Логика c такова, что когда вы нажимаете на глаз, звезды меняются на код и наоборот , Я сделал это с помощью небольшого скрипта:

$(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: синтаксическая ошибка, нераспознанное выражение: # _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">
}