使用內聯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>