gpt4 book ai didi

javascript - 使用 event.currentTarget 获取 child 的索引

转载 作者:行者123 更新时间:2023-11-30 00:12:44 24 4
gpt4 key购买 nike

这里如何去除 jQuery 的“.index()”?我正在寻找的是一种获取单击按钮索引的 native 方法,请参阅下面的源代码(完美运行但我真的找不到任何 Vanilla-JS 解决方案,我不想为此使用 jQuery一个小任务)。谢谢。

    function navButtonClick(ev) {
var buttonIndex = $(ev.currentTarget).index(); /* How to get rid of jQuery? */

document.getElementById("output").innerHTML = buttonIndex;
}

function startTemplate() {
var i;
var navItems = document.querySelectorAll("#navigation button");

for (i=0; i < navItems.length; i++) {
navItems[i].addEventListener("click", navButtonClick);
}
}

document.addEventListener("DOMContentLoaded", startTemplate);
The HTML part looks like this:

<nav id="navigation" role="navigation">
<button type="button"> <em>Navi tab 1</em> </button>
<button type="button"> Navi tab 2 </button>
<button type="button"> Navi tab 3 </button>
<button type="button"> Navi tab 4 </button>
</nav>

<div id="output"></div>

最佳答案

你可以这样做:

function navButtonClick(ev) {
var buttonIndex = Array.prototype.indexOf.call(this.parentElement.children, this);

document.getElementById("output").innerHTML = buttonIndex;
}

function startTemplate() {
var i;
var navItems = document.querySelectorAll("#navigation button");

for (i=0; i < navItems.length; i++) {
navItems[i].addEventListener("click", navButtonClick);
}
}

document.addEventListener("DOMContentLoaded", startTemplate);

检查下面的片段:

function navButtonClick(ev) {
var buttonIndex = Array.prototype.indexOf.call(this.parentElement.children, this);

document.getElementById("output").innerHTML = buttonIndex;
}

function startTemplate() {
var i;
var navItems = document.querySelectorAll("#navigation button");

for (i = 0; i < navItems.length; i++) {
navItems[i].addEventListener("click", navButtonClick);
}
}

document.addEventListener("DOMContentLoaded", startTemplate);
<nav id="navigation" role="navigation">
<button type="button"> <em>Navi tab 1</em>
</button>
<button type="button">Navi tab 2</button>
<button type="button">Navi tab 3</button>
<button type="button">Navi tab 4</button>
</nav>

<div id="output"></div>

关于javascript - 使用 event.currentTarget 获取 child 的索引,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35775562/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com