使用内联onclick获取类元素的索引-纯js无jQuery

Question

所以我有一些类元素：

<span class="show" onclick="show()">show</span>
<span class="show" onclick="show()">show</span>
<span class="show" onclick="show()">show</span>

当我单击这些元素之一时，出于某种原因我需要索引。 我知道如何使用jQuery，但这不是我要的，这里。

我的js函数应如下所示：

function show() {
    var index = document.getElementsByClassName('show')[??];
    alert(index);
}

纯JavaScript怎么可能？ 注意：我必须坚持无法更改的onclick =“ show（）” 。

我希望有人可以帮助，在此先感谢:)

Answer 1

只需获取所有元素的数组并找到获得点击的当前元素

 function show(el) { var els = Array.prototype.slice.call( document.getElementsByClassName('show'), 0 ); console.log(els.indexOf(event.currentTarget)); } 

 <span class="show" onclick="show(this)">span 1</span> <span class="show" onclick="show(this)">span 2</span> <span class="show" onclick="show(this)">span 3</span> 

Answer 2

您可以尝试如下操作：

• 使用addEventListener绑定事件处理程序。 这将允许您使用this 。
• 如果仍然需要元素索引，则可以遍历元素或将NodeList转换为数组，然后使用Array.indexOf

样品

ONCLICK

 function show(self){ var spans = document.querySelectorAll('.show'); console.log(Array.from(spans).indexOf(self)) } 

 <span class="show" onclick="show(this)">show</span> <span class="show" onclick="show(this)">show</span> <span class="show" onclick="show(this)">show</span> 

的addEventListener

 function show(){ var spans = document.querySelectorAll('.show'); console.log(Array.from(spans).indexOf(this)) } function registerEvent(){ var spans = document.querySelectorAll('.show'); for(var i = 0; i< spans.length; i++){ spans[i].addEventListener("click", show) } } registerEvent(); 

 <span class="show" >show</span> <span class="show" >show</span> <span class="show" >show</span> 

Answer 3

如果您绝对坚持使用onclick属性（即使您确实不需要），也可以：

 // get live collection so you only need to call this once var liveCollection = document.getElementsByClassName('show'); function show(event) { // convert liveCollection to array for `.indexOf()` // either ES6 var shows = [...liveCollection]; // or ES5 var shows = Array.prototype.slice.call(liveCollection); var index = shows.indexOf(event.currentTarget); alert(index); } 

 .show { cursor: pointer; } 

 <span class="show" onclick="show(event)">show</span> <span class="show" onclick="show(event)">show</span> <span class="show" onclick="show(event)">show</span> 

但是，我宁愿建议您使用委托事件来处理动态添加的元素，因为使用onclick属性被认为是不好的作法， 但不要只听我的话。

 // see below for how to select the best container var container = document.body; // single event listener for all dynamically added elements container.addEventListener('click', function (event) { if (event.target.classList.contains('show')) { show.call(event.target, event); } }); // get live collection so you only need to call this once var liveCollection = container.getElementsByClassName('show'); function show(event) { // convert liveCollection to array for `.indexOf()` // either ES6 var shows = [...liveCollection]; // or ES5 var shows = Array.prototype.slice.call(liveCollection); // this === event.target var index = shows.indexOf(this); alert(index); } 

 .show { cursor: pointer; } 

 <span class="show">show</span> <span class="show">show</span> <span class="show">show</span> 

关于委托事件处理的onclick是，您不需要onclick属性来处理动态添加的元素，因此这将最适合您的特定用法。

建议（但不是必须）将委派事件的事件侦听器附加到所有动态添加的元素中最直接的container上，以便click事件不必一直冒泡到document.body 。 这使得处理更加有效。

Answer 4

如果您只是在寻找索引，可以将其传递给show（）方法。

<span class="show" onclick="show(0)">show</span>
<span class="show" onclick="show(1)">show</span>
<span class="show" onclick="show(2)">show</span>