Question

我遇到了两个共享常见html类的按钮的问题。这两个按钮都是教程的一部分。在教程逐步进行时，首先显示“跳过”按钮。随着教程进入最后一步，再进入新的教程页面，第3方JS程序包会动态向跳过按钮添加另一个类，并将内部html更改为Continue。我的问题在下面

一个按钮是：

<a class="introjs-button introjs-skipbutton" role="button" tabindex="0">Skip</a>

另一个按钮是

<a class="introjs-button introjs-skipbutton introjs-donebutton" role="button" tabindex="0">Continue</a>

这些按钮是教程指南中包含某些步骤的一部分。它们不会同时显示。但是，单击“跳过”按钮会触发与“继续”按钮相同的操作，如下面的JS代码所示。我希望在单击“跳过”按钮时仅触发该动作，但是它会同时触发这两个动作，因此我不知道该如何解决。

我希望执行某种操作，但是仅在触发<a class="introjs-button introjs-skipbutton>而未触发<a class="introjs-button introjs-skipbutton introjs-donebutton>时触发。

$("a.introjs-button.introjs-skipbutton").not(".introjs-donebutton").click(() => {
    console.log('skipbuttontriggered')
    this._app.skipTutorial = true;
})

我尝试了各种组合，并希望对三重堆积html类使用not（）选择器有一些了解。

Answer 1

您不需要使用:not()。您可以检查它是否没有该课程。

$("a.introjs-button.introjs-skipbutton").click(() => {
  if ( ! $(this).hasClass('introjs-donebutton') {
    console.log('skipbuttontriggered')
    this._app.skipTutorial = true;
  }
})

hasClass()文档可在此处阅读。

Answer 2

如果要动态添加和删除introjs-donebutton类，则可以使用事件委托和使用:not()的选择器来实现。

$(document).on("click", "a.introjs-button.introjs-skipbutton:not(.introjs-donebutton)", () => {
    console.log('skipbuttontriggered')
    this._app.skipTutorial = true;
})

如何在三重选择器类上使用.not（）jQuery选择器？

2 个答案: