点击类索引javascript

我有3个div类：wpEdit和onClick:alertName（）

单击李小龙时，应发出警报：0 当点击成龙时，它应该提醒：1 当点击李连杰时，它应该提醒：2

---

我需要知道单击了class=“wpEdit”的哪个实例

您可能希望在代码中首先处理的是内联HTML绑定

您可以对每个元素使用

document.addEventListener

，也可以依赖于

jQuery是最广泛使用的事件委派实现。如果您已经在使用jQuery，那么这是一个好方法

或者，我也有自己的小朋友

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

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，选择器）=>{
返回函数处理程序（事件）{
const matchingEl=匹配（event.target、选择器、this）；
如果（匹配项！=null）{
fn.呼叫（匹配、事件）；
}
};
};
常量匹配=（目标、选择器、边界元素）=>{
如果（目标===boundElement）{
返回null；
}
if（target.matches（选择器））{
回报目标；
}
if（target.parentNode）{
返回匹配项（target.parentNode、选择器、boundElement）；
}
返回null；
};
常量处理程序=（事件）=>{
log（Array.prototype.indexOf.call（event.currentTarget.children，event.target））；
}
document.getElementById（'parent'）
.addEventListener（'click'，委托（处理程序，.wpEdit'）

李小龙
成龙
李连杰
如果需要基于类wpEdit的div索引，可以执行以下操作：

HTML:

实例：

关于jQuery索引函数的更多信息：
试试这个

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

使用vanilla 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);
}

var wpEdits=document.querySelectorAll（“.wpEdit”）；
for（设i=0；i

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

因为我对JS很陌生，所以对以下解释持保留态度：

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

（3号线和4号线）
这两行将导致任何单击
class=“wpEdit”
调用下面定义的函数
showID（）

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

为了避免浪费CPU时间，运行
中断我不明白，为什么人们在以前的答案中添加了新函数，所以

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

const wpEdit=document.getElementsByClassName（'wpEdit'）；
for（设i=0；i

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

jQuery将是实现这一点的最简单方法。也没有人明确提到“我想用纯javascript实现这一点”。我不认为给出有效的答案有什么问题，我不知道如何在纯javascript中做到这一点，但我正在搜索。因为我认为他只使用了javascript标记，他可能只使用了javascript标记，因为他甚至不知道jQuery。我解释说我正在使用jQuery，并给出了一个函数的链接。哇，我在寻找一种方法，通过vanilla JS在一组元素中找到当前索引。我偶然发现了，但我不会写这么好的答案。。我刚刚发现什么是香草JS isI真正想知道的在你的例子中什么不是“香草”^^很高兴他最终接受了你的答案！我想用纯js来实现，但如果不是的话，jQuery就是coolHi Afdhal，欢迎使用Stack Overflow！除了提供代码外，您能否简单解释一下它是如何工作的/为什么工作的？谢谢感谢您对@MaxvonHippel的热烈欢迎！请原谅我没有解释代码。我对JS非常陌生，我不认为我有资格解释它，因为我担心它可能会混淆其他人。这次我会尽力解释的。
<div class="wpEdit">Bruce Lee</div>
<div class="wpEdit">Jackie Chan</div>
<div class="other">Other</div>
<div class="wpEdit">Jet li</div>

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

    alert(curIdx);
});

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

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

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

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