[英]get index of class element with inline onclick - pure js no jQuery
so i have some class-elements: 所以我有一些类元素:
<span class="show" onclick="show()">show</span>
<span class="show" onclick="show()">show</span>
<span class="show" onclick="show()">show</span>
when i click one of these elements i need the index for some reason. 当我单击这些元素之一时,出于某种原因我需要索引。 i know how to use jQuery, but thats not what i am asking for, here.
我知道如何使用jQuery,但这不是我要的,这里。
my js function should look something like this: 我的js函数应如下所示:
function show() {
var index = document.getElementsByClassName('show')[??];
alert(index);
}
How is that possible with pure javascript? 纯JavaScript怎么可能? NOTE: i have to stick with the onclick="show()" that cannot be changed.
注意:我必须坚持无法更改的onclick =“ show()” 。
i hope someone can help, thanks in advance :) 我希望有人可以帮助,在此先感谢:)
Just get the array of all the elements and find the current element who received the click 只需获取所有元素的数组并找到获得点击的当前元素
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>
You can try something like this: 您可以尝试如下操作:
addEventListener
to bind event handlers. addEventListener
绑定事件处理程序。 This will allow you to use this
. this
。 Array.indexOf
Array.indexOf
Onclick 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 的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>
If you absolutely insist on using the onclick
attribute (even though you don't really need to): 如果您绝对坚持使用
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>
However, I would rather recommend you use delegated events to handle dynamically added elements, as using the onclick
attribute is considered bad practice, but don't just take my word for it. 但是,我宁愿建议您使用委托事件来处理动态添加的元素,因为使用
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>
The nice thing about delegated event handling is you don't need an onclick
attribute to handle dynamically added elements, so this will work best for your particular usage. 关于委托事件处理的
onclick
是,您不需要onclick
属性来处理动态添加的元素,因此这将最适合您的特定用法。
It is recommended, but not necessary, that the event listener for the delegated events is attached to the most immediate container
of all the dynamically added elements, so that the click
event doesn't have to bubble up all the way to the document.body
. 建议(但不是必须)将委派事件的事件侦听器附加到所有动态添加的元素中最直接的
container
上,以便click
事件不必一直冒泡到document.body
。 This makes the handling more efficient. 这使得处理更加有效。
If you're JUST looking for the index, you can pass that to the show() method. 如果您只是在寻找索引,可以将其传递给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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.