Question

我正在尝试创建一个应该替换select元素的div（因为在这种情况下不需要真正的那个）并且我尝试获取每个{{1}的data-select属性（由option标记表示）但我可能做错了，我得到了a。这是我的代码 - HTML：

null

JS：

<div class="select" data-after="&#x43;">
    <i data-select-value="">Date &amp; Time</i>
    <div class="options">
        <a href="#" data-select="Date &amp; Time">Date &amp; Time</a>
        <a href="#" data-select="Alphabetical">Alphabetical</a>
        <a href="#" data-select="Modified">Modified</a>
    </div>
</div>
<div class="select" data-after="&#x43;">
    <i data-select-value="">Delete</i>
    <div class="options">
        <a href="#" data-select="Delete">Delete</a>
        <a href="#" data-select="Edit">Edit</a>
        <a href="#" data-select="Unpublish">Unpublish</a>
    </div>
</div>

如何解决这个问题并获取每个属性（请不要使用jQuery）？（顺便说一句，如果我有任何拼写错误，请原谅我的英语）

非常感谢！

Answer 1

基本上，您可以在javascript中使用querySelectorAll获取所有元素。 https://developer.mozilla.org/de/docs/Web/API/Document/querySelectorAll

试试这个：

＆＃13;

var selectors = document.querySelectorAll('.options a');
   for (var x = 0; x < selectors.length; x++) {
  selectors[x].onclick = function() {
    console.log(this.getAttribute('data-select'));
  }
}

＆＃13;

<div class="select" data-after="&#x43;">
    <i data-select-value="">Date &amp; Time</i>
    <div class="options">
        <a href="#" data-select="Date &amp; Time">Date &amp; Time</a>
        <a href="#" data-select="Alphabetical">Alphabetical</a>
        <a href="#" data-select="Modified">Modified</a>
    </div>
</div>
<div class="select" data-after="&#x43;">
    <i data-select-value="">Delete</i>
    <div class="options">
        <a href="#" data-select="Delete">Delete</a>
        <a href="#" data-select="Edit">Edit</a>
        <a href="#" data-select="Unpublish">Unpublish</a>
    </div>
</div>

＆＃13;

Answer 2

你真的有点过分了。您只需要收集链接并循环遍历它们。您可能已经注意到，在您的代码中，您必须单击两次才能发生任何事情 - 这是因为您将点击事件应用于select div元素的所有子元素以及select div个元素，其中包含option div。

此外，最好不要使用DOM对象的onXyz事件属性，而是使用 W3C DOM Event standard ，它使用addEventListener作为事件回调注册方法。这允许更标准和更健壮的事件注册/注销模型。

// Just get the anchors that are children of your options element:
var selectAnchors = document.querySelectorAll(".options a");

// Just loop through the anchors. No need to loop the divs
for(var x = 0; x < selectAnchors.length; x++) {
  selectAnchors[x].addEventListener("click", function() {
    console.log(this.getAttribute('data-select'));
  });
}

<div class="select" data-after="&#x43;">
    <i data-select-value="">Date &amp; Time</i>
    <div class="options">
        <a href="#" data-select="Date &amp; Time">Date &amp; Time</a>
        <a href="#" data-select="Alphabetical">Alphabetical</a>
        <a href="#" data-select="Modified">Modified</a>
    </div>
</div>

<div class="select" data-after="&#x43;">
    <i data-select-value="">Delete</i>
    <div class="options">
        <a href="#" data-select="Delete">Delete</a>
        <a href="#" data-select="Edit">Edit</a>
        <a href="#" data-select="Unpublish">Unpublish</a>
    </div>
</div>

Answer 3

使用此：

var options = document.querySelectorAll('.select .options a');
for (var x = 0; x < options.length; x++) {
  options[x].onclick = function() {
    console.log(this.getAttribute('data-select'));
  }
}

循环访问子项并获取属性

3 个答案: