Question

这是我第一次考虑将我的事件移动到普通的HTML onClick =“”事件之外，但我似乎无法找到关于如何使用li列表执行此操作的任何参考。

基本上我正在尝试将与scrollToArtical（＃）关联的数字输入myElement.onclick。你将如何重写这个事件，以便事件在.js文件中。

我尝试过使用变体来获取元素，但这些不起作用：

var objScrollToNav = document.getElementById("id_ScrollToNav").children;
var objScrollToNav = document.querySelector("#id_ScrollToNav a");

非常感谢任何帮助 - CES 我的旧代码是：

<ul id="id_ScrollToNav" role="list">
    <li class="sectionNavOff"><a onclick="scrollToArticle(0)" role="link">•</a></li>
    <li class="sectionNavOn"><a onclick="scrollToArticle(1)" role="link">•</a></li>
    <li class="sectionNavOff"><a onclick="scrollToArticle(2)" role="link">•</a></li>
</ul>

Answer 1

使用document.querySelectorAll获取类似数组的列表，然后循环遍历它们。要保持对索引的引用，请确保将索引传递给新的闭包（下面的addEvent函数会创建一个新闭包。）

＆＃13;

function scrollToArticle(index) { console.log("Scrolling to:", index); }

// Select all the elements.
var links = document.querySelectorAll("#id_ScrollToNav a");

// This function adds event listener, and holds a reference to the index.
function addEvent(el, index) {
  el.addEventListener("click", function() {
    scrollToArticle(index);
  });
}

// Loop over the elements.
for (var i = 0; i < links.length; i++) {
  addEvent(links[i], i);
}

＆＃13;

<ul id="id_ScrollToNav" role="list">
    <li class="sectionNavOff"><a role="link">•</a></li>
    <li class="sectionNavOn"><a role="link">•</a></li>
    <li class="sectionNavOff"><a role="link">•</a></li>
</ul>

＆＃13;

Answer 2

由于您的li元素可以收集到一个数组中，并且数组中有索引，因此您实际上不需要将硬编码的数字传递给您的函数。您只需将正在单击的li的索引传递给函数。

此外，当他们没有直接在任何地方导航时，请不要使用<a>元素。这可能会给使用屏幕阅读器的人带来问题。相反，直接在click元素上设置li事件，并完全删除a元素。

最后，请勿使用内联HTML事件属性（onclick）。这就是20年前我们做事件处理程序的方式，不幸的是，这种技术不会死。有 many reasons not to use them 。相反，请遵循现代标准，并将JavaScript与HTML分开。

// Get all the li elements into an array
var items = Array.prototype.slice.call(document.querySelectorAll("#id_ScrollToNav > li"));

// Loop over the list items
items.forEach(function(item, index){
  // Assign each item a click event handler that uses the index of the current item
  item.addEventListener("click", function(){ scrollToArticle(index) });
});

// Just for testing
function scrollToArticle(articleNumber){
 console.log(articleNumber);
}

#id_ScrollToNav > li {
  cursor:pointer;
}

<ul id="id_ScrollToNav" role="list">
  <li class="sectionNavOff" role="link">•</li>
  <li class="sectionNavOn" role="link">•</li>
  <li class="sectionNavOff" role="link">•</li>
</ul>

Answer 3

要添加上述内容，请使用data-attributes将jss样式与javascript分开（意思是，html类标记只能用于html / css事物）。

<li data-element="sectionNavOff">
<li data-element="sectionNavOn">

使用数据标签有一些小的缺点，主要是速度，但许多企业应用程序和框架（例如Bootstrap）倾向于认为将样式与javascript分离的好处完全超过了缺点。如果我知道你是否使用jQuery，我可以给你一个详细的用法示例。

通过点击访问对onclick事件的引用

3 个答案: