时间戳

首页 > 解决方案 > 当它不存在时仍然检测元素

javascript - 当它不存在时仍然检测元素

问题描述

这是我的代码：

var element = document.getElementsByClassName('btn btn-secondary btn-buy add-cart')[0];

function autoSearch() {
  if(typeof(element) != 'undefined' && element != null){
    console.log('Element DOES Exist');
  }
  else {
    console.log('Element Does NOT Exist!');
  }
}

我的目标是检测一个元素是否存在，并在它存在与否时分别执行一个函数。当元素不存在时，它位于 Class Name 下，btn btn-secondary btn-buy add-cart hidden但当它存在时，它位于 Class Name 下btn btn-secondary btn-buy add-cart。

当我检测是否btn btn-secondary btn-buy add-cart存在时，它仍然说它仍然隐藏时存在。我怀疑这是因为btn btn-secondary btn-buy add-cart hidden它确实存在时与元素有确切的字母，但我不知道如何修复它。

任何帮助表示赞赏。

标签： javascript

解决方案

您可以通过检查元素是否隐藏或仅在未隐藏时选择来解决问题：

第一种方式：

const el = document.querySelector(".btn.btn-secondary.btn-buy.add-cart:not(.hidden)");

if (el) {
    // Do something when it's not hidden
} else {
    // It's hidden
}

第二种方式，在这种情况下，您el将始终具有价值（假设元素始终存在）：

const el = document.querySelector(".btn.btn-secondary.btn-buy.add-cart");

if (el.classList.contains("hidden")) {
    // Do something when it's not hidden
} else {
    // It's hidden
}

推荐阅读