如何检查被点击的元素是否包含某个特定类的元素

Question

我正在编写一个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;
});

- harrybowser

---

您的代码应该能够正常工作，只是有一个错别字，类名是 label-danger，但您正在检查 .hasClass("label_danger")。 - Mahatmasamatman

你正在JavaScript中搜索label_danger，但是你的span元素上有一个label-danger类，这就是你的代码确切的写法吗？ - Roberto Murguia

哦，这很尴尬，非常感谢您的快速帮助！那么我该怎么处理呢？删除这个问题吗？ - harrybowser

@harrybowser 做过那个事情。我最终决定成为一个连字符人，从不使用下划线，这样我就不会犯这个错误了。在查看代码时很容易忽略。 - Lewis

不确定最佳解决方案，但一个想法是添加一个.mouseover处理程序来检查label_danger并添加/删除my_danger_label以反映它。然后你的.click可以检查my_danger_label。 - Preston PHX

Answer 1

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

- Preston PHX

---

不要浪费时间回答打字错误的问题，只需评论并投票关闭。 - Barmar

回答慢会延迟自动删除那些被关闭的问题的垃圾桶。 - Barmar

除了笔误之外，有更好的方法来完成所要求的任务。 - Preston PHX

啊，那你应该展示如何在“if”语句中正确使用它。很多人都用错了。 - Barmar

仅仅只有代码的答案并没有太大的帮助。一个好的回答应该解释为什么 OP 会遇到这个问题，以及你的代码是如何解决它的。在纯 JS 中，它将是 if (this.querySelector('span.label_danger'))。 - RobG

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

- harrybowser