Javascript 如何使此分区可单击？

我想让这个wordpress插件的每个“卡片”都可以点击（）

因此，我添加了一个纯JS元素，代码如下：

document.getElementsByClassName('fc_card-container').onclick = function() {alert('It works!');}

它不起作用，所以我想知道这有多错误

---

谢谢

如果要为所有卡应用单击事件处理程序：

// Get all the elements with a .fc_card-container class and store them on a variable
// .getElementsByClassName returns an array-like object with all the selected elements 
var cards = document.getElementsByClassName('fc_card-container');

// Use [].slice.apply(cards) to convert the cards NodeList into an array
// Iterate over the cards array with a .forEach

[].slice.apply(cards).forEach(function(card, index){ 

    // Each array element corresponds to a card element
    // Use the .addEventListener( EVENT, callback ) to attach an event handler for each card element

    card.addEventListener("click", function(e){ 
        alert(); 
        console.log(cards[index]); // Index gives us the exact array position (index) of the clicked card. 
        console.log(e.target); // e.target gives us access to the clicked element
    }); 

});

---

如果要为所有卡应用单击事件处理程序：

// Get all the elements with a .fc_card-container class and store them on a variable
// .getElementsByClassName returns an array-like object with all the selected elements 
var cards = document.getElementsByClassName('fc_card-container');

// Use [].slice.apply(cards) to convert the cards NodeList into an array
// Iterate over the cards array with a .forEach

[].slice.apply(cards).forEach(function(card, index){ 

    // Each array element corresponds to a card element
    // Use the .addEventListener( EVENT, callback ) to attach an event handler for each card element

    card.addEventListener("click", function(e){ 
        alert(); 
        console.log(cards[index]); // Index gives us the exact array position (index) of the clicked card. 
        console.log(e.target); // e.target gives us access to the clicked element
    }); 

});

---

document.getElementsByClassName

返回匹配元素的数组。在您的例子中，是一个类名为

fc\u card-container

的元素数组。下一步是迭代元素并为每个元素分配一个事件侦听器，或者使用索引（从0开始）选择一个特定的侦听器

将单击指定给所有

---

document.getElementsByClassName

返回匹配元素的数组。在您的例子中，是一个类名为

fc\u card-container

的元素数组。下一步是迭代元素并为每个元素分配一个事件侦听器，或者使用索引（从0开始）选择一个特定的侦听器

将单击指定给所有

---

虽然这会产生OP想要的结果，但我相信OP不会遵循这个答案。你应该把每一块都分解一下，你是对的。我添加了一些可能有帮助的评论。如果代码需要进一步说明，请告诉我。如何获得addEventListener中的框标识，如数字（第一个框，第二个框）？索引变量表示卡数组中单击的卡的数量。虽然这会产生OP所寻找的结果，我相信OP不会明白这个答案。你应该把每一块都分解一下，你是对的。我添加了一些可能有帮助的评论。如果代码需要进一步说明，请告诉我。如何获得addEventListener中的框标识，如数字（第一个框，第二个框）？索引变量表示卡数组中单击的卡的数量。我已在alert中添加了'I'变量的代码值（'It works！'+I）但是'i'变量总是得到找到的div类的计数。我怎样才能准确地得到它所单击的框号，这是因为这是我在循环结束时变成的最后一个数字。这可能会有所帮助：我在alert中添加了'I'变量的代码值（'it works！'+I），但'I'变量始终会得到找到的div类的计数。我怎样才能准确地得到它所点击的框号这是因为这是我在循环结束时变成的最后一个数字。这可能会有帮助：

var cards = document.getElementsByClassName('fc_card-container');
cards[2].onclick = function() {alert('It works!');}; //0,1,2