0

我一直在研究工具提示，为此我创建了一个 javascript 函数Tooltip()，在该函数中我选择了所有 DOM 元素，例如const targets = document.querySelectorAll('*')，在选择所有元素后，我forEach在targets变量和内部为每个函数添加了函数我创建了一个if语句，在该语句中我检查了一个元素包含我在数组中提到的特定属性，requiredAttrs但它无法以某种方式工作！而且我不知道我在哪里做错了。

完整代码

function Tooltip() {
      const requiredAttrs = ['data-tooltip', 'data-tooltip-position', 'data-tooltip-content'];
      const targets = document.querySelectorAll('*');

      targets.forEach((target, index) => {
            if (target.hasAttribute(requiredAttrs[index])) {
                  console.log('Y');
            } else {
                  console.log('No');
            }
      });
}

Tooltip();

<!DOCTYPE html>
<html dir="ltr" lang="en">
      <head>
            <meta charset="UTF-8" />
            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <link rel="stylesheet" href="public/css/main.css" />
            <title>Pearl Framework</title>
      </head>
      <body class="vh-full grid-center">
            <style>
                  body {
                        background-color: #a1a1a1;
                  }

                  .box {
                        width: 100px;
                        height: 100px;
                        background-color: purple;
                  }
            </style>

            <div
                  class="box"
                  data-tooltip="true"
                  data-tooltip-position="top-center"
                  data-tooltip-content="Hello, World!"
            ></div>

            <script src="public/script/tooltip.js"></script>
      </body>
</html>

如您所见， a<div class="box"></div>具有所有 3 个属性，因此if语句应该运行，但else部分正在运行。

4

2 回答 2

3

目标数组的索引与您要比较的 requiredAttrs 数组的索引不对应。你会想要这样的东西：

targets.forEach((target, index) => {
  const hasAttrs = requiredAttrs.every(attr => target.hasAttribute(attr));
  if (hasAttrs) {
    console.log('Y');
  } else {
    console.log('No');
  }
});

编辑：

这是有效的，因为您对 querySelectorAll 的调用实际上是在捕获页面上的每个元素并将其作为数组返回。在您的 forEach 调用中，您将使用当前元素的数组索引位置来检查这些属性是否存在，以检查 requiredAttrs。很可能当我们甚至迭代到具有您感兴趣的属性的 div 时，我们可能正在处理一个大于 requiredAttrs 数组长度的索引，更不用说我们只会检查一个的事实属性而不是所有属性。我的代码获取目标节点并调用 requiredAttrs 数组上的 .every 方法，以检查目标节点上是否存在每个所需的 attrs。

虽然这解决了最初的问题，但我应该注意，这可能会导致性能不佳，并且不是查找具有特定属性的元素的推荐方法。如果您想要一个元素集合，这些元素都保证在您的数组中具有属性，您可以简单地将它们添加到您的查询中，如下所示：

docmuent.querySelectorAll('*[data-tooltip][data-tooltip-position][data-tooltip-content]');
于 2021-07-21T19:40:54.850 回答
0

起初，在这里使用索引是不正确的，因为它是目标数组的索引，如果你看一下 document.querySelectorAll('*') 的输出，你可以看到它还包括 html、head 和其他标签，

换句话说，您正试图通过超出其长度的索引访问 requiredAttrs

你必须用 for loop arround requiredAttrs 包装你的 if 语句

于 2021-07-21T19:43:04.110 回答