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

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

我有三个带有ID和类的HTML按钮。其中两个还拥有数据属性。

数据属性用于应更改其样式显示属性的元素。

基本思想是显示或隐藏段落元素。 我试图通过使用querySelectors和for循环来减少重复代码，而不是使用多个事件侦听器。 我一直在写从代码笔的第31行开始的函数。我已经尝试过：document.querySelector（classbtns [i] .getAttribute（'data-value'））。style.display =“ inline”; 我得到：TypeError：document.querySelector（...）为空

我保留并注释了较早的代码块，以帮助您了解我要做什么。

请查看我的代码并链接到下面的代码栏：

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

解决方法

我发现了两个问题：

1. 在HTML中，按钮“ btngreatest”的数据值标记缺少引号。

2. 由于要按ID选择面板，因此应在前缀“＃”

   document.querySelector（'＃'+ classbtns [i] .getAttribute（'data-value'））。style.display =“ inline”;

,

当使用带有document.querySelector的ID选择元素时，您需要在前面加上“＃”，这样就可以：

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

但是您最好还是使用

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

,

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

[...]，但是标准定义了一种更简单的方法：可以通过数据集属性读取的DOMStringmap。 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);

,

通过使用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>