Question

当我点击具有特定类的单元格时，我希望将指定了相同类别的其他单元格更改为某种颜色，当我单击其他单元格时，我希望它具有相同的效果，但是将以前的单元格更改回其默认样式。从搜索互联网我可以收集到的内容，我需要使用Javascript，但我的Javascript知识严重缺乏。

Answer 1

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

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

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

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+'"]而非使用.选择器。

基于类更改单元格颜色

2 个答案: