Question

我有一张带有一些复选框的表格。当用户单击任何复选框时，单元格的内容将更新。

该表对每组行都有切换效果。当我使用带有jQuery的复选框更新单元格时，此效果会反转。

这是一个简单的问题解决方法。注意在单击复选框后切换效果如何反转，因此当鼠标为OUT时，行会突出显示，这不是我想要的：

这是使用的jQuery :(我无法使.on（'hover'..在jsfiddle上工作）

$(document).ready(function(){

    $('tr[data-demo]').hover(function() {
        var t = $(this);
        t.siblings('[data-demo="'+t.attr('data-demo')+'"]').toggleClass('hover');
        t.toggleClass('hover');
    });

    $('.demo').click(function(){
        $(this).parent().html('text');
    });

});

Answer 1

将您的悬停更改为鼠标悬停和鼠标移除。它有效。

$(document).ready(function(){
    $('tr[data-demo]').mouseover(function() {
        var t = $(this);
        t.siblings('[data-demo="'+t.attr('data-demo')+'"]').addClass('hover');
        t.addClass('hover');
    });
    $('tr[data-demo]').mouseout(function() {
        var t = $(this);
        t.siblings('[data-demo="'+t.attr('data-demo')+'"]').removeClass('hover');
        t.removeClass('hover');
    });

    $('.demo').click(function(){
        $(this).parent().html('text');
    });
});

小提琴：http://jsfiddle.net/VinnyFonseca/s4tWd/1/

Answer 2

使用回调函数删除在悬停时设置的类。见Sample

$(document).ready(function(){

  $('tr[data-demo]').hover(function() {
    var t = $(this);
    t.siblings('[data-demo="'+t.attr('data-demo')+'"]').addClass('hover');
    t.addClass('hover');
  },function() {
    var t = $(this);
    t.siblings('[data-demo="'+t.attr('data-demo')+'"]').removeClass('hover');
    t.removeClass('hover');
  });

  $('.demo').click(function(){
      $(this).parent().html('text');
  });

});

更新DOM元素后切换效果倒置

2 个答案: