javascript - 如何让这个div可以点击？

Question

我想让这个 wordpress 插件的每张“卡片”都可以点击 ( http://www.davidbo.dreamhosters.com/?page_id=11 )

所以我添加了一个纯 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
    }); 

});