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;"});
  }
});