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);
});

jquery .on（＆＃34;点击＆＃34;）在.off之后不工作（＆＃34;点击＆＃34;）

1 个答案: