javascript – Jquery：小绑定hover / unbind代码片段,几行很长,不知道是什么问题

2019年8月1日 153次阅读

我创建了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;"});
   });
});

我需要保留背景色动画,它需要淡化.

最佳答案 你应该只使用一个选定的类.另外我建议不要使用你在这里的任何.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;"});
  }
});
点赞