Отменить выделенную область при нажатии на переключатель

Question

Привет, у меня есть таблица с несколькими ячейками.

Он имеет ниже функциональность:

• При наведении курсора он выделить текущую ячейку с соответствующей области.
• При щелчке удерживайте выделение в том же положении.

Вот JS FIDDLE, например.

Я хочу, если я снова нажму на черный ящик, он будет отменять/не выделять эту ячейку и другую связанную область. Так же, как переключение. В настоящее время никто не может отменить выбор после их выбора, поэтому я пытаюсь добавить параметр, чтобы отменить выбор, щелкнув еще раз.

Как это можно сделать? Любая помощь будет оценена.

JS

var rows = $('#graph-table tr'); 
var graphSize = rows.length; 
rows.each(function (index, el) { 
    var singleCell = $(el).find('td'); 
    singleCell.each(function (i, cell) { 
     $(cell).attr('data-row', graphSize - index - 1); 
     $(cell).attr('data-col', i); 
    }); 
}); 

$('#graph-table td').click(function (event) { 
    $('#graph-table td').removeClass('g-clicked g-selected'); 
    $(this).addClass('g-clicked g-selected'); 
    $(this).prevAll('td').addClass('g-clicked'); 
    var colPos = $(this).data('col'); 
    var nextRows = $(this).closest('tr').nextAll('tr'); 
    nextRows.each(function (index, el) { 
     var targetCol = $(el).find('td[data-col="' + colPos + '"]'); 
     targetCol.addClass('g-clicked'); 
     targetCol.prevAll('td').addClass('g-clicked'); 
    }); 
}); 

// make the graph 
$('#graph-table td').hover(function (event) { 
    $('#graph-table td').removeClass('g-hover g-selected-hover'); 
    $(this).addClass('g-hover g-selected-hover'); 
    $(this).prevAll('td').addClass('g-hover'); 
    var colPos = $(this).data('col'); 
    var nextRows = $(this).closest('tr').nextAll('tr'); 
    nextRows.each(function (index, el) { 
     var targetCol = $(el).find('td[data-col="' + colPos + '"]'); 
     targetCol.addClass('g-hover'); 
     targetCol.prevAll('td').addClass('g-hover'); 
    }); 
}, function (event) { 
    $(this).removeClass('g-hover'); 
}); 

$('#graph-table').mouseleave(function (event) { 
    $(this).find('td').removeClass('g-hover g-selected-hover'); 
}); 

Answer 1

Вы можете проверить, если щелкнул тд уже имеет классы «г кликнул г выбранных», то просто удалить эти классы, но сделать ничего другого Fiddle

$('#graph-table td').click(function (event) { 
    if($(this).hasClass('g-clicked g-selected')){ 
     $('#graph-table td').removeClass('g-clicked g-selected'); 
    } 
    else { 
     $('#graph-table td').removeClass('g-clicked g-selected'); 
     $(this).addClass('g-clicked g-selected'); 
     $(this).prevAll('td').addClass('g-clicked'); 
     var colPos = $(this).data('col'); 
     var nextRows = $(this).closest('tr').nextAll('tr'); 
     nextRows.each(function (index, el) { 
      var targetCol = $(el).find('td[data-col="' + colPos + '"]'); 
      targetCol.addClass('g-clicked'); 
      targetCol.prevAll('td').addClass('g-clicked'); 
     }); 
    } 
}); 

Answer 2

В функции $('#graph-table td').click() вы можете сначала проверить, не щелкнул ли пользователь тот же квадрат, который они нажали ранее. Простой способ сделать это так:

$('#graph-table td').click(function() { 
    if ($(this).hasClass("g-selected"))) { 
     //Remove selection 
    } else { 
     //Add selection 
    } 
}