根据 Class 更改单元格颜色

Question

当我单击具有特定 class 的单元格时，我希望分配给它的具有相同 class 的其他单元格更改为某种颜色，当我单击不同的单元格时，我希望它具有相同的效果，但将以前的单元格更改回它们的默认样式。根据我在网上搜索得到的信息，我需要使用 Javascript，但我的 Javascript 知识严重缺乏。

Answer 1

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

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

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

Answer 2

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

我认为这样的事情可能有效 - 所有要单击的元素都是包含在 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+'"] 而不是 . 选择器

根据 Class 更改单元格颜色

Change Cell Colour Based On Class

javascript

class

cells