在切換點擊取消選擇高亮顯示的區域

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

您可以檢查是否點擊了TD已有的類 'G-點擊G-選擇' 然後就刪除這些類，但別的什麼也不做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 
    } 
}