[英]get index of child with event.currentTarget
如何在这里摆脱 jQuery 的“.index()”? 我正在寻找的只是一种获取单击按钮索引的本机方式,请参阅下面的源代码(工作完美,但我真的找不到任何用于此的 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>
<script>
function navButtonClick(index) {
return function (ev) {
document.getElementById("output").innerHTML = index;
}
}
function startTemplate() {
var i;
var navItems = document.querySelectorAll("#navigation button");
for (i=0; i < navItems.length; i++) {
navItems[i].addEventListener("click", navButtonClick(i));
}
}
document.addEventListener("DOMContentLoaded", startTemplate);
</script>
希望,它有效:)
无论如何,仅适用于按钮(即使对于它们,我也需要closest
的 chrome)。
document.addEventListener('click', function (event) { var target = event.target, nodes, i; if (target.closest) { target = target.closest('button'); } if (target && target.tagName === 'BUTTON') { nodes = target.parentElement.children; for (i=0; nodes[i]!==target; ++i); document.querySelector("output").textContent = i; } })
<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> <output></output>
您可以通过两种不同的方式执行此操作。 首先,在添加事件侦听器的同时将按钮的索引传递给相应的函数:
function navButtonClick(buttonIndex) {
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.bind(null, i));
}
}
startTemplate();
其次,创建一个动态检查元素索引的函数:
function navButtonClick() {
document.getElementById("output").innerHTML = getIndex(this);
}
function getIndex(elm) {
var parent = elm.parentElement;
for (var i = 0; i < parent.children.length; i++) {
if (parent.children[i].isEqualNode(elm)) {
return i;
}
}
}
function startTemplate() {
var i;
var navItems = document.querySelectorAll("#navigation button");
for (i = 0; i < navItems.length; i++) {
navItems[i].addEventListener("click", navButtonClick);
}
}
startTemplate();
ES6风格的答案:
const indexOf = element => Array.from(element.parentNode.children).indexOf(element)
const buttonIndex = indexOf(event.currentTarget)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.