元素在Wordpress上只读取一次jQuery代码。

Question

我正在尝试构建一个div-table，以便在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不是很有信心，我对此感到困惑。

非常感谢。

Answer 1

不要在wordpress中使用$来调用jQuery，请用jQuery替换$s：

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