将 HTML5 数据属性解析为 document.querySelector

Question

我有三个 HTML 按钮，带有 id 和类。其中两个还持有数据属性。

数据属性适用于它们应该更改样式显示的元素。属性。

基本思想是显示或隐藏段落元素。我试图通过使用 querySelectors 和 for 循环而不是使用多个事件侦听器来减少重复代码。我坚持编写从 codepen 第 31 行开始的函数。我试过：document.querySelector(classbtns[i].getAttribute('data-value')).style.display = "inline"; 我得到：TypeError: document.querySelector(...) is null

我保留并注释掉了早期的代码块，以帮助您了解我正在尝试做什么。

请查看我的代码和link下面的codepen：

html:

 <p id="toy-pictures-latest" class="panel">Latest Toy Pictures</p><br>
         <p id="toy-pictures-greatest" class="panel">Greatest Toy Pictures</p>

Toy Pictures
<button type="button" id="btnlatest" data-value="toy-pictures-latest" class="buttons">Latest</button>
<button type="button" id="btngreatest" data-value="toy-pictures-greatest class="buttons">Greatest</button></details></li>
<button type="button" id="clear-btn">Clear</button>

css:

 #toy-pictures-latest.panel{
    display: inline;
}

#toy-pictures-greatest.panel{
        display: inline;
}

js:

/*function fgreatest() {
   document.getElementById('toy-pictures-greatest').style.display = "inline";
   }*/

//The following function clears the p elements in class "panel" by changing the display value in css

function clearall()
{
var panels = document.querySelectorAll('.panel'), i;  
console.log("exe");  
for (i = 0; i < panels.length; ++i) {
  panels[i].style.display = "none";
}

}  

//This is the previous version of the querySelector.
//It required a new function for each <p> element id 

/*const classbtns = document.querySelectorAll(".buttons");

 for (let i = 0; i < classbtns.length; i++) {
     classbtns[i].addEventListener("click", fgreatest);
 }*/

//This is the attempt to grab the name of the element
//from the html data value property and change the css //style display to inline

 const classbtns = document.querySelectorAll(".buttons");
 
  for (let i = 0; i < classbtns.length; i++) {
     classbtns[i].addEventListener("click", function() {
     
     document.querySelector(classbtns[i].getAttribute('data-value')).style.display = "inline";
      });
  }

document.getElementById('clear-btn').addEventListener("click", clearall);

codepen

Answer 1

我发现了两个问题：

在 HTML 中，data-value 按钮“btngreatest”的标签缺少结束引号。
因为你想按 ID select 面板，你应该在前面加上'#'

document.querySelector('#'+ classbtns[i].getAttribute('data-value')).style.display = "内联";

Answer 2

当使用 document.querySelector 按 Id 选择元素时，您需要在前面加上“#”，这样会是：

document.querySelector('#' + classbtns[i].getAttribute('data-value')).style.display = "inline";
      });

但是你也可以直接使用

document.getElementById(classbtns[i].getAttribute('data-value')).style.display = "inline";

Answer 3

这是一个更当前和简化干净的方法，使用forEach方法并使用event.target方法定位我们点击的实际元素

Event.target 将确保您定位到正确的元素以获取其 data-value - 如果您有很多按钮并嵌套在其中，这种方法更好彼此。

您也可以使用新的 dataset 方法 而不是 使用 getAtribute 方法

使用data.set

 document.querySelector("#" + e.target.dataset.value).style.display = "inline";

现场演示：

function clearall() {
  var panels = document.querySelectorAll('.panel')
  panels.forEach(function(el) {
    el.style.display = "none";
  });
}

const classbtns = document.querySelectorAll(".buttons");
classbtns.forEach(function(btn) {
  btn.addEventListener("click", function(e) {
    document.querySelector("#" + e.target.getAttribute('data-value')).style.display = "inline";
  })
})

//clear al;
document.getElementById('clear-btn').addEventListener("click", clearall);

#toy-pictures-latest.panel {
  display: none;
}

#toy-pictures-greatest.panel {
  display: none;
}

<p id="toy-pictures-latest" class="panel">Latest Toy Pictures</p><br>
<p id="toy-pictures-greatest" class="panel">Greatest Toy Pictures</p>

<br>
Toy Pictures
<button type="button" id="btnlatest" data-value="toy-pictures-latest" class="buttons">Latest</button>

<button type="button" id="btngreatest" data-value="toy-pictures-greatest" class="buttons">Greatest</button>

<button type="button" id="clear-btn">Clear</button>

Answer 4

作为解决方案的补充，可能值得考虑有关获取数据属性的旧 MDN：

[...], but the standard defines a simpler way: a DOMStringmap you can read out via a dataset property. https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

我个人也会去争取活动的目标。类似于：

const attachListener = btn => btn.addEventListener('click', (e) => document.getElementById(e.target.dataset.value).style.display = 'inline';

clsBtns.forEach(attachListener);

将 HTML5 数据属性解析为 document.querySelector

Parsing HTML5 data-attribute to document.querySelector

html

javascript

dom

queryselector