jQuery 在 Gutenberg 塊上無法正常工作 (Wordpress)

Question

我正在嘗試構建一個表格以用作 Gutenberg (Wordpress) 中的一個塊。

當我將頁面創建為 HTML 文件時，我有一段非常簡單的代碼可以工作。 我已將調用的 .js 文件定位在文檔的末尾和正文結束標記之前，因為我讀過這是一個很好的做法。 但是，當代碼作為 PHP 文件上傳時，我不必總是重現相同的效果。 我一直在使用 Stock Lab 來創建我的塊，高光效果有時有效，但不是全部。 我將同一塊的多個實例用於不同類型的內容。

當突出顯示效果起作用時，它僅在您在本示例中看到的同一塊的一個實例中起作用，而在其余實例中不起作用。 在這種情況下，它僅適用於最后一個實例，但它曾經是第一個實例，而不是我對其進行其他嘗試時的最后一個實例。

我想知道我的 jQuery 代碼中是否缺少任何可以使該元素的所有實例都被解釋為獨立部分的內容（如果這確實是問題所在）。 下面的代碼代表了我在 Wordpress 塊中使用的完全相同的代碼。 如您所見，它適用於表的所有實例，而在前面提供的鏈接上，它只修改其中之一。

我錯過了什么？ 如何在 Gutenberg 塊上插入一段 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');
});