Jquery：小的绑定悬停/取消绑定代码片段，几行长，不知道出了什么问题

Question

我创建了 DIV.cb-toggle，当用户将鼠标悬停在该 div 上时，它会动画为橙色，当用户将鼠标悬停在该 div 上时，它会动画回灰色，当用户单击该 div 时，它会动画为蓝色，告诉已选择的用户。因此，当未选择它时，它具有 mouseenter mouseleave 动画，但是当选择它时，我想取消绑定这些事件，我不希望悬停事件在被选择时起作用，只有在未选择时才起作用。完成我想要完成的任务的最佳方法是什么？我想出了下面的代码，但我很确定这是一种可怕的方法，而且我不知道该怎么做。非常感谢您的帮助。

我的代码：

$('.cb-toggle').toggle(function() { 
      $(this).animate({"background":"blue", "color":"#fff;"});      
      $(".cb-toggle").unbind("click.myfadee");
   }, function() {
      $(this).animate({"background":"gray", "color":"#fff;"});
      $('.cb-toggle').trigger('mouseenter');
   });
});

我正在调用此绑定：

$(".cb-toggle").bind("click.myfadee", function(){
      $(".cb-toggle").mouseenter(function() {
      $(this).animate({"background":"orange", "color":"#fff;"});
   }).mouseleave(function() {
      $(this).animate({"background":"gray", "color":"#fff;"});
   });
});

我需要保留背景颜色动画，它需要淡入淡出。

Answer 1

我会使用 CSS 进行样式设置，以简化整个设置，而无需取消/重新绑定，如下所示：

.cb-toggle { background: blue; color: #fff; }
.cb-toggle.active { background: gray; }
.cb-toggle.active:hover { background: orange; }

然后您可以这样做：

$('.cb-toggle').click(function() {
  $(this).toggleClass("active");
});

这种方法还可以让您将所有样式、颜色等卸载到 CSS，这意味着无需更改 JavaScript当您决定调整颜色或任何其他样式时需要:)

---

或者，如果您需要支持 IE6，请添加 .live() 处理程序，仅在具有 .active 类的悬停时触发，如下所示

$(".cb-toggle.active").live('mouseenter', function() {
  $(this).addClass('hover');
}).live('mouseleave', function() {
  $(this).removeClass('hover');
});

： CSS：

.cb-toggle.active.hover { background: orange; }

Answer 2

您可能应该只使用选定的类。另外，我建议不要使用此处的任何 .css() 调用。只需使用类即可。

$(".cb-toggle").bind("click.myfadee", function(){
  $(this).toggleClass('selected');
});

$('.cb-toggle').toggle(function() {
  var $this = $(this);
  if ( $this.is('.selected') ) {
    $this.css({"background":"blue", "color":"#fff;"});      
  }
}, function() {
  var $this = $(this);
  if ( $this.is('.selected') ) {
    $this.css({"background":"gray", "color":"#fff;"});
  }
});