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-clicked g-selected＆＃39;然后只删除这些类，但不执行任何其他操作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

在public class Project { private final Set<Job> jobs; // constructors, getters, setters, ... // for updating, I need to be able to present only the available tasks public Collection<Job> getAvailableJobs() { return Status.AVAILABLE.filter(getJobs()); } } public class Job { private final State state; // Constructors, getters, setters, ... // update either to finished or failed // (Timespan is nothing more than a pair of times) public void update(Timespan span, State newState) { getState().update(this, span, newState); } } public enum State { AVAILABLE { @Override public void update(Job job, Timespan span, State newState) { if(newState == AVAILABLE || newState == UNAVAILABLE) throw new IllegalArgumentException(); job.setSpan(span); job.setState(newState); } }, UNAVAILABLE, FINISHED, FAILED; public void update(Job job, State newState) { throw new IllegalStateException(); } public Collection<Job> filter(Collection<Job> jobs) { Collection<Job> result = new HashSet<>(); for(Job j : jobs) if(j.getStatus() == this) result.add(j); return result; } }功能中，您可以先检查用户是否点击了之前点击过的同一个方块。一个简单的方法是这样的

new_vector = [s_i{bits}]

在切换时取消选中突出显示的区域，然后点击

2 个答案: