jquery .on ("click")在 .off ("click")之后不起作用

Question

我可以使用一些帮助来调试这个:

var factBody = jQuery(".fact__body");

jQuery(".fact").on("click", function() {
    jQuery(".fact").not(this).addClass("fact-inactive");
    jQuery(this).addClass("fact-active");
    jQuery(".fact").off("click");

    var indexOfClicked = jQuery(this).index();
    var descriptionOfIndex = 
    jQuery(".fact__description").eq(indexOfClicked - 1);

 jQuery(factBody).show().addClass("active").append(descriptionOfIndex);
});

jQuery(".fact-close").on("click", function() {
    jQuery(factBody).hide().removeClass("active");
    jQuery(".fact").removeClass("fact-inactive fact-active");
    jQuery(".fact").on("click");
});

https://jsfiddle.net/left23/yyoxpk9j/

单击某个项目后，我使用 .off 方法删除单击处理程序。这有效。因此，当显示文本面板时，项目将不再可单击。这就是我防止同时打开多个面板的方法。

当文本面板关闭时，通过单击“关闭”按钮，我尝试再次添加单击处理程序，但这失败了。我不清楚为什么。

提前致谢。如果需要更多说明，请告诉我。

Answer 1

问题是 .on('click') 不记得您之前发生的事件。你需要把它变成一个你可以调用的函数，就像这样

var factBody = jQuery(".fact__body");
var handleClickEvent = function() {
  jQuery(".fact").not(this).addClass("fact-inactive");
  jQuery(this).addClass("fact-active");
  jQuery(".fact").off("click", handleClickEvent);

  var indexOfClicked = jQuery(this).index();
  var descriptionOfIndex = 
      jQuery(".fact__description").eq(indexOfClicked - 1);

  jQuery(factBody).show().addClass("active").append(descriptionOfIndex);
}

jQuery(".fact").on("click", handleClickEvent);

jQuery(".fact-close").on("click", function() {
  jQuery(factBody).hide().removeClass("active");
  jQuery(".fact").removeClass("fact-inactive fact-active");
  jQuery(".fact").on("click", handleClickEvent);
});