如何检查单击的元素是否包含具有特定类的元素答案

【问题标题】：How to check if clicked element contains element with certain class如何检查单击的元素是否包含具有特定类的元素
【发布时间】：2020-06-18 17:28:23
【问题描述】：

我正在编写一个 Tampermonkey 脚本，如果单击某个按钮，该脚本应该执行一些代码。

它应该检查被点击的按钮是否包含一个图标在被点击之前。我还不知道这是否可能。有许多可以点击的独特按钮。

这是按钮：

<a class="btn aao_btn" id="aao_n">
  <span id="available_aao_n" class="label label-danger"><span class="glyphicon glyphicon-remove"></span>
</a>

这是我到目前为止所得到的。它总是返回 false

$("a.aao_btn").on("click", function (e) {
  if (e.shiftKey) {
    // Execute if Shift is pressed while clicking (working)
  }
  else {
    if ( $(this).find("span").hasClass("label_danger") ) {
        // Execute if clicked button contains a danger icon
      }
    else {
       // No danger. Currently this is always the outcome.
    }
  }
  return false;
});

【问题讨论】：

您的代码应该可以工作，只有一个错字，类是label-danger，但您正在检查.hasClass("label_danger")。
您在 javascript 上搜索 label_danger，但在 span 元素上有一个 label-danger 类，这正是您的代码编写方式吗？
天哪，这很尴尬，非常感谢您的快速帮助！那么我该如何处理呢？删除这个问题？
@harrybowser 去过那里，做到了。我最终决定做一个连字符的人，从不使用下划线，所以我从来没有犯过这个错误。查看代码时超级容易错过。
不确定最好的解决方案，但一个想法是添加一个 .mouseover 处理程序来检查 label_danger 并添加/删除 my_danger_label 以镜像它。然后你的 .click 可以检查 my_danger_label

标签： javascript html tampermonkey

【解决方案1】：

if ( $(this).find("span.label-danger").length ) {

【讨论】：

不要浪费时间发布错字问题的答案。只需发表评论并投票结束。
Answers slow delay the hoover 会在这些问题关闭后自动删除。
除了错别字，还有更好的方法来完成所要求的操作
啊。然后你应该在if 语句中展示如何使用它。很多人都做错了。
仅代码的答案没有那么有用。一个好的答案应该解释为什么 OP 有问题以及您的代码如何修复它。在普通的 JS 中，它将是 if (this.querySelector('span.label_danger'))。

【解决方案2】：

除了错字之外，这不会检查元素被点击之前的状态。这是我最终得到的结果：

var danger_check = false;

$("a.aao_btn").mouseover (function() {
    if ( $(this).find("span.label-danger").length ) {
        danger_check = true;
    }
    else {
        danger_check = false;
    }
});


$("a.aao_btn").on("click", function (e) {
  if (e.shiftKey) {
  }
  else {
    if ( danger_check ) {
        // Do this
      }
    else {
       // Do that

    }
  }
  return false;
});

【讨论】：