Element 在 Wordpress 上只读取一次 jQuery 代码答案

【问题标题】：Element only reads jQuery code once on WordpressElement 在 Wordpress 上只读取一次 jQuery 代码
【发布时间】：2020-03-19 15:04:18
【问题描述】：

我正在尝试构建一个 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 不是很有信心，我很茫然。

非常感谢。

【问题讨论】：

首先，您问题中的代码已经适用于“表”的多个实例：jsfiddle.net/26buf8mw/1。其次，只需使用toggleClass()而不是创建无效的非标准属性和css()：jsfiddle.net/26buf8mw/2
另外，为什么不直接使用table 元素呢？
我不能为此使用表格元素，因为样式应用于不同的行。我没能把边界弄好，因为有些看起来有点不对劲。
您绝对可以使用table 实现这种精确的布局。无论哪种情况，正如我在第一条评论中提到的，代码按原样工作，那么具体问题是什么？
关于您的回答，我的问题是我想要在此表中实现的效果很好，但在我在 Wordpress 的同一篇文章中创建的其他表中却没有。当我单击表的第一个实例中的行时，代码工作得很好。但是当我尝试在帖子中选择表的其他实例时它不会。有什么想法吗？

标签： jquery html css wordpress background-color

【解决方案1】：

wordpress 中不要使用 $ 调用 jQuery，将 $s 替换为 jQuery：

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

【讨论】：