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

＆＃13;

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

＆＃13;

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

＆＃13;

<强>的addEventListener

＆＃13;

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();

＆＃13;

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

＆＃13;

Answer 3

如果你绝对坚持使用onclick属性（即使你真的不需要）：

＆＃13;

// 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);
}

＆＃13;

.show {
  cursor: pointer;
}

＆＃13;

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

＆＃13;

但是，我建议您使用delegated events来处理动态添加的元素，因为使用onclick属性被视为不良做法，but don't just take my word for it.

＆＃13;

// 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);
}

＆＃13;

.show {
  cursor: pointer;
}

＆＃13;

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

＆＃13;

委派事件处理的好处是，您不需要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>

使用内联onclick获取class元素的索引 - pure js no jQuery

4 个答案:

示例