如何使该div可点击？

Question

我想让该wordpress插件的每个“卡片”都可点击（ http://www.davidbo.dreamhosters.com/?page_id=11 ）

因此，我使用以下代码添加了Pure JS元素：

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

而且它不起作用，所以我想知道这有多严重。

谢谢 ！

Answer 1

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

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

});

Answer 2

document.getElementsByClassName返回匹配元素的数组。 在您的情况下，是类名称为fc_card-container的元素数组。 下一步是遍历元素，并为每个元素分配一个事件侦听器，或使用索引（从0开始）选择一个特定的事件监听器。

为所有点击分配

var cards = document.getElementsByClassName('fc_card-container');
for(var i = 0; i < cards.length; i++){ //iterate through each card
   cards[i].onclick = function() {alert('It works!');};
};

将点击分配给一张卡片（例如：第三张卡片）

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