javascript - 更新 DOM 元素后翻转效果

Question

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

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

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

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

利用回调函数来移除悬停时设置的类。参见 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');
  });

});