WordPress可复用区块表格行点击变色仅首个实例生效问题求助

看起来你遇到的问题是事件绑定范围不对，加上直接操作DOM属性的方式不够健壮导致的。别担心，咱们一步步来修复：

问题根源 #

1. 你的代码直接用$('.row').click()绑定事件，如果WordPress的可复用区块是动态插入页面的（比如在初始DOM加载后添加），那后面的.row元素不会被绑定到事件；
2. 就算所有表格都在初始DOM里，用attr来存储状态不够规范，而且直接修改内联样式也不如用CSS类来维护方便。

修复方案 #

1. 改用事件委托绑定点击事件 #

把事件绑定到一个更上层的、肯定存在的父元素（推荐用每个表格的直接父元素.table，这样更高效），这样不管是初始加载还是后来插入的表格行，都能触发事件：

// 用事件委托绑定到每个表格的父元素
$('.table').on('click', '.row', function() {
  // 切换选中状态
  $(this).toggleClass('selected');
});

2. 用CSS类管理背景色（替代内联样式） #

把背景色的切换逻辑放到CSS里，这样更清晰，也方便后续修改样式：

.row { 
  display: table-row; 
  background: #fff;
  cursor: pointer; /* 加上鼠标提示，告诉用户可点击 */
  transition: background 0.2s ease; /* 加个过渡动画，体验更好 */
}
/* 选中状态的样式 */
.row.selected {
  background: #ececff;
}

/* 保留你原来的其他CSS */
.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; }

3. 移除冗余的属性操作 #

原来的att属性完全可以去掉，因为toggleClass会帮我们管理选中状态，不需要手动维护属性。

完整效果说明 #

修改后的HTML不需要改动（如果是WordPress区块，保持原来的结构就行），最终每个表格实例里的行点击都会独立切换背景色，完全互不影响，而且点击同一行还能取消选中状态。

为什么这样有效？ #

• 事件委托利用了事件冒泡机制，不管.row是初始就存在还是后来动态添加的，点击事件都会冒泡到父元素.table，然后触发我们绑定的处理函数；
• 用CSS类管理状态，把样式和逻辑分离，代码更易维护，也避免了内联样式的冲突；
• 每个表格的行操作只会影响自己，因为事件委托是绑定到各自的.table父元素，不会干扰其他表格。

内容的提问来源于stack exchange，提问作者djur