Question

我想在点击功能之后启用一个函数（而不是事件）并在另一个点击函数后禁用相同的函数，例如：

function foo () {

    $('#bg').hover(function() {
        $(this).css('background','red');
    }, function(event) {
        $(this).css('background','green');

});


$('#button').click(function(){ 

    if (!$(#button).hasClass('active')) { 
        foo(); // enable foo
    } else {
        ??? // I would like to disable foo()
    }

});

我尝试使用bind / unbind＆amp;开/关功能，但我想我理解它保留给事件（点击功能）而不是回调功能。

我显然可以编写第二个函数来禁用foo()的操作，但我想知道是否有办法通过优化实现此目的。

Answer 1

我会以这种方式重写代码：

function fooMouseEnter() {
  $(this).css('background','red');
}
function fooMouseLeave() {
  $(this).css('background','green');
}
$("#button").click(function() {
  if (!$("#button").hasClass('active')) {
    foo
      .on("mouseenter", fooMouseEnter)
      .on("mouseleave", fooMouseLeave);
  } else {
    foo
      .unbind("mouseenter", fooMouseEnter)
      .unbind("mouseleave", fooMouseLeave);
  }
});

另请参阅：How do I unbind "hover" in jQuery?

Answer 2

有些解决方案不需要始终绑定和解除绑定处理程序。

解决方案1：使用标志来确定处理程序是否应该执行某些操作，例如：

＆＃13;

(function(){
  
  var hoveringEnabled = false;    
  
  $(function(){

    $("#button").click(function(){
      hoveringEnabled = !hoveringEnabled;
    });

    $('#bg').hover(function() {
       if(hoveringEnabled){
         // Do things...
         $(this).css('background','red');
       }
    }, function(event) {
      if(hoveringEnabled){
        // Do other things...
        $(this).css('background','green');
      }
    });

  });
}());

＆＃13;

#bg {
  width: 200px;
  height: 150px;
  background-color:green;
}

＆＃13;

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>

<button id="button">Click me</button>
<div id="bg">Hover me</div>

＆＃13;

解决方案2：使用类而不是标志：

＆＃13;

$(function(){

  var $bg = $("#bg");

  $("#button").click(function(){
    $bg.toggleClass("hoveringEnabled");
  });

  $(document).on('mouseenter', '#bg.hoveringEnabled', function() {
    // Do things...
    $bg.css('background','red');
  });
  $(document).on('mouseleave', '#bg.hoveringEnabled', function() {
    // Do other things...
    $bg.css('background','green');
  });

});

＆＃13;

#bg {
  width: 200px;
  height: 150px;
  background-color:green;
}

＆＃13;

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>

<button id="button">Click me</button>
<div id="bg">Hover me</div>

＆＃13;

解决方案3：在您要启用/禁用的功能仅影响元素样式的特定情况下，您可以完全省略该功能并使用CSS代替：

＆＃13;

$(function(){
  $("#button").click(function(){
    $("#bg").toggleClass("hoveringEnabled");
  });
});

＆＃13;

#bg {
  width: 200px;
  height: 150px;
  background-color:green;
}

#bg.hoveringEnabled:hover {
  background-color:red;
}

＆＃13;

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>

<button id="button">Click me</button>
<div id="bg">Hover me</div>

＆＃13;

绑定和取消绑定函数jquery

2 个答案: