基于类更改单元格颜色[关闭]答案

【问题标题】：Change Cell Colour Based On Class [closed]基于类更改单元格颜色[关闭]
【发布时间】：2015-09-12 17:51:26
【问题描述】：

当我单击具有特定类的单元格时，我希望分配给它的具有相同类的其他单元格更改为某种颜色，当我单击不同的单元格时，我希望它具有相同的效果，但是将以前的单元格更改回其默认样式。从我通过搜索互联网收集到的信息来看，我需要使用 Javascript，但我的 Javascript 知识严重缺乏。

【问题讨论】：

标签： javascript class cells

【解决方案1】：

通过阅读您的问题，我认为您可能需要更改具有不同类别的不同单元格。

我认为这样的事情可能会起作用 - 所有要单击的元素都是包含在 id 为“clickable-cells”的包装器中的 div。应该一起玩的 div 应该都有相同的类。另外，这是使用 jQuery。

$('#clickable-cells').children('div').click(function(){
    $('#clickable-cells').children('div').removeClass('inactive'); // Remove inactive class from all groups and elements
    targetClass = $(this).attr('class'); // Get the group class
    $('#clickable-cells div[class="'+targetClass+'"]').not(this).addClass('inactive'); // Make elements in this group inactive (use this class to change color)

});

注意使用[class="'+targetClass+'"] 而不是. 选择器，以防可点击元素有多个类。

【讨论】：

只是更多信息，我正在使用一个表格，几乎每个单元格中都有文本。所以当我点击说第一个时，我希望其他列中的单元格，但不一定在同一行中，突出显示。所以只是为了确保，我应该在文本或表格元素周围添加 div，然后在整个表格周围添加一个主 div？
只需给表格一个“clickable-cells”的ID，然后将目标从“div”更改为“td”就可以了。

【解决方案2】：

使用 jQuery，您可以通过以下方式实现：

$('.cell').on('click', function(e){
    $(.selected).removeClass('selected'); // remove class from previously clicked cell
    $(this).addClass('selected');
})

其中.selected 是具有被单击单元格或 div 或您想要的任何元素的特定样式的类。 .cell 是每个单元格的公共类

【讨论】：