jQuery在Gutenberg块（Wordpress）上无法正常工作

Question

我正在尝试建立一个表以用作Gutenberg（Wordpress）中的块。

当我将页面创建为HTML文件时，我有一段非常简单的代码可以工作。我已将.js文件放置在文档的中，并将其放置在结束body标记之前，因为我已阅读这是一个好习惯。但是，当代码作为PHP文件上传时，我不必总是重现相同的效果。我一直在使用Stock Lab来创建块，高光效果有时会起作用，但并非所有时候都能起作用。我将同一块的多个实例用于不同类型的内容。

当突出显示效果起作用时，它只能在本例中看到的同一块的一个实例中起作用，而在其余实例中则不起作用。在这种情况下，它仅在最后一个实例中起作用，但是它曾经是第一个实例，而在我尝试过其他尝试时则不是最后一个实例。

我想知道如果确实存在问题，那么我的jQuery代码中是否缺少任何可以使该元素的所有实例解释为独立片段的东西。下面的代码表示我在Wordpress块中一直使用的完全相同的代码。如您所见，它适用于表的所有实例，而在前面提供的链接上，它仅修改其中之一。

我想念的是什么？我该如何在古腾堡块上插入一段jQuery代码，以在不同实例之间独立地进行复制？

谢谢。

$('.row').click(function() {
	$(this).toggleClass('highlight');
});

.container {
  width: 70%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 30px 30px;
}
.table-wrapper {
  width: 100%;
  border-radius: 10px;
  border-bottom: 1px solid #f2f2f2;
  border-left: 1px solid #f2f2f2;
  border-right: 1px solid #f2f2f2;
  overflow: hidden;
}
.table {
  width: 100%;
  display: table;
  margin: 0;
}

.highlight {
  background-color: #ececff;
}

.row {
  display: table-row;
  background: #fff;
}


.table-header {
  display: table-header-group;
  color: #ffffff;
  background: #6c7ae0;
  border-bottom: 1px solid #f2f2f2;
  margin: 0;
}

.cell {
display: table-cell;
}

p {
margin-bottom: 0em;
}

.row .cell {
  font-family: Helvetica;
  font-size: 16px;
  line-height: 1.4em;
  font-weight: unset !important;
  padding-bottom:20px;
  padding-top: 20px;
  padding-left: 25px;
  padding-right: 25px;

}
.table-header .cell {
  font-family: Montserrat, Helvetica;
  font-size: 18px;
  line-height: 1em;
  font-weight: unset !important;
  padding-bottom:20px;
  padding-top: 20px;
  padding-left: 25px;
  padding-right: 25px;
}

.row .cell:nth-child(1) {
  width: 100% padding-left: 40px;
}

.row .cell:nth-child(2) {
  width: 50%
}

.row:hover {
  background-color: #ececff;
  cursor: pointer;
}

.highlight {
  background-color: #ececff;
}

.table, .row {
  width: 100% !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="table-wrapper">
    <div class="table">
      <ul class="table-header">
        <li class="cell">
          Title 01
        </li>
        <li class="cell">Title 02
        </li>
      </ul>
      <ul class="row">
        <li class="cell">
          <p><?php block_field ('a1');?></p>
        </li>
        <li class="cell">
          <p><?php block_field ('a2');?></p>
        </li>
      </ul>
      <ul class="row">
        <li class="cell">
          <p><?php block_field ('b1');?></p>
        </li>
        <li class="cell">
          <p><?php block_field ('b2');?></p>
        </li>
      </ul>
    </div>
  </div>
</div>


<div class="container">
  <div class="table-wrapper">
    <div class="table">
      <ul class="table-header">
        <li class="cell">
          Title 01
        </li>
        <li class="cell">Title 02
        </li>
      </ul>
      <ul class="row">
        <li class="cell">
          <p><?php block_field ('a1');?></p>
        </li>
        <li class="cell">
          <p><?php block_field ('a2');?></p>
        </li>
      </ul>
      <ul class="row">
        <li class="cell">
          <p><?php block_field ('b1');?></p>
        </li>
        <li class="cell">
          <p><?php block_field ('b2');?></p>
        </li>
      </ul>
    </div>
  </div>
</div>

Answer 1

而不是使用$，而是使用jQuery关键字（$将不会在wordpress中调用jquery）：

jQuery('.row').click(function() {
    jQuery(this).toggleClass('highlight');
});