带有拆分的jQuery多重选择器

Question

我有一个带有两个<td>的行，其类别为messageROW和titleROW，其后为ID为' activecd '的复选框。 我试图在切换复选框时更改messageROW和titleROW （整个行）的bg颜色，但titleROW仅更改颜色。

有什么建议么？

$('[id^=activecd]').change(function(){
    $('.messageROW,.titleROW'+$(this).prop('id').split('activecd')[1]).closest('td').toggleClass('colorcode', this);
});

HTML ：

 <tr> <td class="messageROW"></td> <td class="titleROW"></td> <td><input id="activecd"></td> </tr> 

Answer 1

我建议以下内容，尽管未经测试：

$('[id^=activecd]').change(function(){
    $(this).closest('tr').toggleClass('colorcode', this.checked);
});

这将侦听指定元素上的change事件，找到最接近的tr元素，如果选中此复选框，则添加colorcode类，如果未选中，则删除该类。

Answer 2

尝试使用CSS $().add(selector) jQuery $().add(selector) ， $().toggleClass("bgOn")

<style>
.bgOn {background:rgb(255,230,230)} // any css to toggle.
</style>

我认为问题尚不明确。

<button onclick="someFunction(this)">Toggle color</button>

function someFunction(this){
  var $this=$(this);
  $this.parent().find(".messageROW,.titleROW").toggleClass("bgOn");
  // or
  $this.parent().parent().find("tr>td:first-child, tr>td:nth-child(2)").toggleClass("bgOn");
}

可能会帮助您。