4

我有 3 个带有类的 div：wpEdit 和 onClick：alertName()

<div class="wpEdit" onClick="alertName()">Bruce Lee</div>
<div class="wpEdit" onClick="alertName()">Jackie Chan</div>
<div class="wpEdit" onClick="alertName()">Jet li</div>

单击时，我想知道单击的 Div 的类 wpEdit 的索引：

function alertName(){
    //Something like this
    var classIndex = this.className.index; // This obviously dosnt work
    alert(classIndex); 
}

当点击李小龙时它应该警报：0 当点击成龙时它应该警报：1 当点击李连杰时它应该警报：2

我需要知道单击了哪个 class="wpEdit" 实例

4

5 回答 5

5

Try this

function clickedClassHandler(name,callback) {

    // apply click handler to all elements with matching className
    var allElements = document.body.getElementsByTagName("*");

    for(var x = 0, len = allElements.length; x < len; x++) {
        if(allElements[x].className == name) {
            allElements[x].onclick = handleClick;
        }
    }

    function handleClick() {
        var elmParent = this.parentNode;
        var parentChilds = elmParent.childNodes;
        var index = 0;

        for(var x = 0; x < parentChilds.length; x++) {
            if(parentChilds[x] == this) {
                break;
            }

            if(parentChilds[x].className == name) {
                index++;
            }
        }

        callback.call(this,index);
    }
}

Usage:

clickedClassHandler("wpEdit",function(index){
    // do something with the index
    alert(index);

    // 'this' refers to the element 
    // so you could do something with the element itself
    this.style.backgroundColor = 'orange';
});
于 2012-12-01T10:05:12.510 回答
2

您可能想要在代码中解决的第一件事是内联 HTML 绑定。

您可以document.addEventListener在每个元素上使用，或依赖事件委托。

最广泛使用的事件委托实现是 jQuery 提供的。如果你已经在使用 jQuery，这就是你要走的路！

或者我也有我自己的小delegate工具。

const delegate = (fn, selector) => {
  return function handler(event) {
    const matchingEl = matches(event.target, selector, this);
    if(matchingEl != null){
      fn.call(matchingEl, event);
    }
  };
};

const matches = (target, selector, boundElement) => {
  if (target === boundElement){
    return null;
  }
  if (target.matches(selector)){
    return target;
  }
  if (target.parentNode){
    return matches(target.parentNode, selector, boundElement);
  }
  return null;
};

这就是您注册事件侦听器的方式。

document.getElementById('#parent')
  .addEventListener('click', delegate(handler, '.wpEdit'));

这就是您如何获取生成事件的元素的索引。

const handler = (event) => {
  console.log(Array.prototype.indexOf.call(event.currentTarget.children, event.target));
}

现场演示：

const delegate = (fn, selector) => {
  return function handler(event) {
    const matchingEl = matches(event.target, selector, this);
    if (matchingEl != null) {
      fn.call(matchingEl, event);
    }
  };
};

const matches = (target, selector, boundElement) => {
  if (target === boundElement) {
    return null;
  }
  if (target.matches(selector)) {
    return target;
  }
  if (target.parentNode) {
    return matches(target.parentNode, selector, boundElement);
  }
  return null;
};

const handler = (event) => {
  console.log(Array.prototype.indexOf.call(event.currentTarget.children, event.target));
}

document.getElementById('parent')
  .addEventListener('click', delegate(handler, '.wpEdit'));
<div id="parent">
  <div class="wpEdit">Bruce Lee</div>
  <div class="wpEdit">Jackie Chan</div>
  <div class="wpEdit">Jet li</div>
</div>

于 2012-12-01T09:47:57.787 回答
1

如果你想要基于你的类 wpEdit 的 div 的索引，你可以这样做：

HTML：

<div class="wpEdit">Bruce Lee</div>
<div class="wpEdit">Jackie Chan</div>
<div class="other">Other</div>
<div class="wpEdit">Jet li</div>

JS：

$(".wpEdit").bind("click", function(){
    var divs = $(".wpEdit");
    var curIdx = divs.index($(this));

    alert(curIdx);
});

现场示例：http: //jsfiddle.net/pJwzc/

更多关于 jQuery 的索引功能的信息：http: //api.jquery.com/index/

于 2012-12-01T09:53:50.550 回答
0

使用香草 javascript，这对我有用：

var wpEdits = document.querySelectorAll(".wpEdit");

for (let i = 0; i < wpEdits.length; i++)
  wpEdits[i].addEventListener("click", showID);

function showID(evt) {
  for (let i = 0; i < wpEdits.length; i++)
    if(wpEdits[i] == evt.target)    
      alert(i);
}

可能不是最好的解决方案，因为我还是 js 新手。

由于我对 JS 很陌生，因此请对以下解释持保留态度：

（第 1 行）这类似于var wpEdits = document.getElementsByClassName("wpEdit");. 它会将class="wpEdit"html 文件中的所有实例分配给wpEdits变量。

（第 3 行和第 4 行）这两行将导致单击下面定义的class="wpEdit"调用函数showID()。

（第 6 行和第 10 行）当点击事件发生时，浏览器会将被点击项目的唯一属性传递给evt变量。然后在 for 循环中使用它来增量地与所有可用实例进行比较。evt.target用于到达实际目标。一旦找到匹配项，它将提醒用户。

为避免浪费 CPU 时间，break;建议在找到匹配项后立即运行 a 以退出循环。

于 2018-12-26T04:51:36.500 回答
0

我不明白，为什么人们在以前的答案中添加新功能，所以......

const wpEdit = document.getElementsByClassName('wpEdit');
for(let i = 0; i < wpEdit.length; i++){
  wpEdit[i].addEventListener('click',function(){
    alert(i);
  });
}

我刚刚使用循环添加了“点击”事件。并且 [i] 已经是当前点击的类索引...

小提琴

于 2019-04-05T21:54:01.097 回答