javascript - 更新 DOM 元素后反转切换效果

Question

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

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

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

http://jsfiddle.net/s4tWd/

这是使用的 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

将悬停更改为 mouseover 和 mouseout。有用。

$(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

利用回调函数删除悬停时设置的类。查看示例

$(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');
  });

});