元素在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不是很有信心，我不知所措。

非常感谢。

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