javascript - Jquery:小绑定(bind)悬停/解除绑定(bind)代码片段，几行长，不知道出了什么问题

Question

我创建了 DIV.cb-toggle，当用户将鼠标悬停在这个 div 上时，它会变成橙色，当他们悬停在这个 div 上时，它会变回灰色，当用户点击这个 div 时，它会变成橙色蓝色，告诉用户它已被选中。所以当它没有被选中时，它有 mouseenter mouseleave 动画，但是当它被选中时我想取消绑定(bind)这些事件，我不希望 hover 事件在它被选中时起作用，只有当它没有被选中时。做我想完成的事情的最好方法是什么？我想出了下面的代码，但我很确定这是一种可怕的方法，我不知道该怎么做。非常感谢您的帮助。

我的代码:

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

我调用这个绑定(bind):

$(".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 作为样式来简化您的整个设置，而无需取消/重新绑定(bind)，如下所示:

.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; }