Question

我的插件中有这个代码：

$('tr', $this).hover(function(){
  var cur_color = null;
  cur_color = $this.css('background-color');
$this.css('background-color', options.tr_hover_bgcolor);
}, function(){
  $this.css('background-color', cur_color);
});

以上，$this指的是包裹集或table作为示例。该代码应该在鼠标输入和鼠标离开时更改行背景颜色。在插件中使用时它不起作用。在插件之外，类似的代码工作正常。 这也是代码中唯一没有在插件中工作的部分，其余部分工作正常。

此代码不适用于插件：

$('#' + table_id + ' tr').hover(function(){
  cur_color = $(this).css('background-color');
  $(this).css('background-color', '#FFF3B3');
}, function(){
  $(this).css('background-color', cur_color);
});

请指出为什么上面的代码在插件中不起作用？

由于

Answer 1

这部分：

$('tr', $this).hover(function(){
  var cur_color = null;
  cur_color = $this.css('background-color');
  $this.css('background-color', options.tr_hover_bgcolor);
}, function(){
  $this.css('background-color', cur_color);
});

应该是这样的：

$('tr', $this).hover(function() {
  $.data(this, 'bgColor', $(this).css('background-color'));
  $(this).css('background-color', options.tr_hover_bgcolor);
}, function() {
  $(this).css('background-color', $.data(this, 'bgColor'));
});

所以你要改变悬停行的背景，而不是整个表格。适用的版本目前依赖于全局变量......插件版本超出范围。相反，这种方法使用$.data()按行存储它。

除非你需要支持IE6（或需要这是动态的），你可以在CSS中做这样的事情：

.hoverTable tr:hover { background-color: #EEEEEE; }

不确定这是否是一个选项，只是需要注意的事项。

另外，看看.delegate()方式，如果你有很多行，绑定要快得多：

$($this).delegate('tr', 'mouseeneter', function() {
   $.data(this, 'bgColor', $(this).css('background-color'));
   $(this).css('background-color', options.tr_hover_bgcolor);
}).delegate('tr', 'mouseleave', function() {
   $(this).css('background-color', $.data(this, 'bgColor'));
});

这会为每个表附加一个处理程序，而不是每个表中的每一行，并侦听要冒泡的事件。如果你有很多行，那么很多可以更快地绑定，从而带来更好的页面加载时间。

插件中的jQuery Hover问题

1 个答案: