Bootstrap+Slim Gem环境下实现可点击表格单元格及报错排查

抛出syntax error, unexpected =>的原因是Slim模板写法不符合语法规则：

• Slim中HTML标签的属性必须定义在标签声明的同层级，不能和标签内输出的Ruby内容混写在==/=输出语句后
• 原代码== activity_cell.subtitle, :onclick => "classSetter()".html_safe把属性哈希:onclick => ...放在了Ruby输出语句的参数位置，解析器会将其识别为非法Ruby语法，直接抛出箭头符号意外的错误，此处给字符串加.html_safe也属于无效写法，属性本身就没有被放到正确的解析位置
• 原有JS逻辑也存在缺陷：classSetter函数会遍历给页面所有td.event单元格统一加类，既没有关联实际点击的元素，也没有实现多次点击切换样式的能力，内联事件的写法也不利于后续维护。

优先采用无内联事件的事件委托方案，性能更好、维护性更强，适配大量单元格的场景。

Slim模板修正 #

去掉错误的混写属性逻辑，直接在td标签上声明结构类，单独输出单元格内容即可：

td.event
  = activity_cell.subtitle

Javascript逻辑修正 #

通过事件委托监听单元格点击，直接操作被点击的目标元素，支持多次点击切换样式：

document.addEventListener('DOMContentLoaded', function() {
  // 替换成你实际表格的选择器，绑定一次事件即可支持所有单元格
  const table = document.querySelector('table');
  if (!table) return;

  table.addEventListener('click', function(e) {
    // 精准匹配被点击的事件单元格
    const cell = e.target.closest('td.event');
    if (!cell) return;

    // 单次点击加类、再次点击移除类，实现多次点击切换样式
    cell.classList.toggle('unClicked');

    // 如果需要支持3种及以上样式循环切换，可以用下面的多状态逻辑替换上面的toggle
    // const clickTimes = Number(cell.dataset.clickTimes || 0);
    // cell.classList.remove('state-0', 'state-1', 'state-2');
    // cell.classList.add(`state-${clickTimes % 3}`);
    // cell.dataset.clickTimes = clickTimes + 1;
  })
})

备选：内联事件写法（不推荐） #

如果一定要用内联onclick的写法，Slim正确语法和对应JS如下：
Slim部分：

td.event onclick="classSetter(this)"
  = activity_cell.subtitle

JS部分：

function classSetter(cell) {
  cell.classList.toggle('unClicked');
}

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