Question

此处显示：JS Fiddle

这是我们关注的代码：

    doit1();

    function doit2(){
        $("#evtTarget").on("click", function(evt) {
            $("#evtTarget").addClass("highlighted");
            $("#evtTarget").on("mouseover mouseleave", highlight);
            $("#evtTarget").html("<p>You Turned on the hover effect!</p>");
            doit1();
        });}

    function doit1(){
        $("#evtTarget").on("click", function(evt) {
            $("#evtTarget").off("mouseover mouseleave", highlight);
            $("#evtTarget").html("<p>You shut off the hover effect!</p>");
            $("#evtTarget").removeClass("highlighted");
            console.log("check");
            doit2();
        });}

有关此代码的一些信息，我无法弄清楚，每次来回拨打电话并加倍拨打电话。这最终打破了页面。为什么这样做以及如何做得更好？

Answer 1

您的代码有点“可重入”...您只需要设置 onClick 一次......

尝试：

$(function() {
  turnItOn();

  $("#evtTarget").on("click", function(evt) {
    if ($("#evtTarget").hasClass("highlighted")) {
      turnItOff();
    } else {
      turnItOn();
    }
  });
});
function turnItOn() {
  $("#evtTarget").addClass("highlighted");
  $("#evtTarget").on("mouseover mouseleave", highlight);
  $("#evtTarget").html("<p>You Turned on the hover effect!</p>");
}

function turnItOff() {
  $("#evtTarget").off("mouseover mouseleave", highlight);
  $("#evtTarget").html("<p>You shut off the hover effect!</p>");
  $("#evtTarget").removeClass("highlighted");
}

function highlight(evt) {
  $("#evtTarget").toggleClass("highlighted");
}

正如你在这个版本中看到的那样：

https://jsfiddle.net/pnz9eooz

或者关闭事件，就像Alon在写这篇文章时建议的那样：）

Answer 2

在这两项功能上，将$("#evtTarget").on("click", function(evt) {更改为$("#evtTarget").off( "click" ).on("click", function(evt) {

为什么每次呼叫加倍？

2 个答案: