Question

在我的resetTable函数中，在创建新表后，在最底部我调用hover()函数，因此草图板将起作用。但是，因为hover()函数包括更改表格单元格的背景颜色，所以我需要将其关闭，这样我的trail()函数才能改变表格单元格的不透明度。

我在调用原始resetTableTrail函数的位置创建了resetTable()函数，然后应该关闭hover()函数，并允许trail()函数接管，但情况似乎并非如此。

这是一个现场演示：http://codepen.io/hgducharme/pen/bmyGc?editors=001

以下是我的代码的相关部分：

$(function() {
  buildTable(16);
  hover();
  resetTable();
  trail();
  randomColorHover();
  resetTableTrail();
});



// Hover Function To Add Colors
function hover() {
  $('td').hover(function() {
    $(this).css('background-color', 'rgb(90,188,215)');
  },

  function() {
    $(this).css('background-color', 'rgb(90,188,215)');
  });
};


// Rebuilds Table When Button Is Clicked
function resetTable() {
  $('button').on('click', function() {

    var choice = prompt("How many columns and rows would you like? Please pick a number between (1 & 64).", "16");

    if (choice < 1 || choice > 64) {
      alert("That was not a valid entry, please specify a number between (1 & 64)");
      return null;
    }

    else {
      var resetColor = $('td').css('background-color', 'rgb(215,215,215)');
      var removeTable = $('table').remove();
      buildTable(choice);
      $('td').on("click", hover() );
    }
  });
}

// If the hover call is in the original resetTable function
// Then it doesn't allow for the trail mode to properly run
// So I created a new function that allows for the trail mode
// To run properly, and also allows for the normal button
// To reset the grid and then call the hover function 
// When the grid resets
function resetTableTrail() {
  $('#trail').click(function() {

    resetTable();

    $('td').off("click", hover() );

    trail();

  });
}


// Creates Trail
function trail() {
  $("#trail").click(function() {
    $('td').hover(function() {
      $(this).css('opacity', '0');
    },

    function() {
      $(this).fadeTo('slow', 1);
    });
  });
};

Answer 1

您应该将您的演示版本缩小到代表您的问题所需的最小值。

话虽如此，我不确定演示会有什么样的行为但你使用不正确的语法将事件处理程序传递给on()

您希望将该函数作为引用传递而不是调用它。

变化：

$('td').on("click", hover() );

要

$('td').on("click", hover );

对off()

执行相同操作

我在你的hover()中猜测你只想影响clciked元素。由于您将处理程序作为参考传递，因此您可以使用td访问在悬停函数中单击的this的当前实例。

function hover() {
    var $el = $(this).hover(function () {
        $el.css('background-color', 'rgb(90,188,215)');
    },

    function () {
        $el.css('background-color', 'rgb(90,188,215)');
    });
};

Answer 2

off()应参考on()附加的函数。

所以这个

$('td').off("click", hover() );

错误，因为你的悬停不会返回任何功能。

您最好在此处使用命名空间事件。设置：

.on('click.somename', function() {} )

并删除：

.off('click.somename'); // note - does not need function reference here.

但我个人会在这里只使用一个附加到表本身的处理程序：

$('table').on('click','td', function() { ... })

在这种情况下，您不需要在表格操作上添加/删除处理程序。

为什么我的.off（）事件处理程序不关闭该函数？

2 个答案: