Element仅在Wordpress上读取一次jQuery代码

Question

我正在尝试构建一个div表以用作Wordpress中的可重用块。

我希望单击时更改整个行的背景色。我设法做到了，但是当我插入同一张表的多个实例（因为它是一个可重用的块，它们都具有相同的类）时，这种效果仅出现在表的第一个实例中。

[当您尝试选择不同表中的行时，什么也没有发生。

这是我的桌子：

$('.row').click(function() {
  if ($(this).attr('att') == 0) {
    $(this).css('background', '');
    $(this).attr('att', 1);
  } else {
    $(this).css('background', '#ececff');
    $(this).attr('att', 0);
  }
});

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

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

<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>Element01.1</p>
        </li>
        <li class="cell">
          <p>Element01.2</p>
        </li>
      </ul>
      <ul class="row">
        <li class="cell">
          <p>Element02.1</p>
        </li>
        <li class="cell">
          <p>Element02.2</p>
        </li>
      </ul>
    </div>
  </div>
</div>

[我正在尝试找到一种解决方案，以使用户可以在独立表中选择不同的行（并在需要时可以取消选择它们。）>

任何想法如何实现它？我对jquery不太有信心，我很茫然。

非常感谢。

我正在尝试构建一个div表以用作Wordpress中的可重用块。我希望整个行的背景色在单击时发生变化。我设法做到了，但是当我插入几个...

Answer 1

[不使用$来在wordpress中调用jQuery，用jQuery代替$ s：