javascript - 在多个元素上调用 onClick 函数

Question

我查看了这里的其他一些帖子，但仍然无法解决这个问题。我的 html 中有几个元素与 cardContainer 类:

<div class="cardContainer">
<div id="card2" class="block" onclick="changeClass()">
</div>
</div>


<div class="cardContainer">
<div id="card3" class="block" onclick="changeClass()">
</div>
</div>

对于每个 onClick 事件，我想调用这个 JS 函数:

<script type="text/javascript"> 
function changeClass(){
if(document.getElementById("card2").className == "block")
document.getElementById("card2").className += " rotated";

else
document.getElementById("card2").className = "block";
}
</script> 

我想做的是包含 card3 id，这样它会在点击时触发相同的功能。我如何才能在 javascript 中组合 ID“card2”和“card3”以便函数正常工作？

我知道如果我使用 getElementById，我只能获得一个而不是多个 ID/类，但是我尝试使用 getElementsByClassName 举例但没有成功。还查看了其他帖子，但无法根据建议使其正常工作......我是 Javascript 的新手，不太确定如何处理这个问题。

感谢您的帮助!

Answer 1

试试这个:

HTML

<div class="cardContainer">
    <div class="card block">Click Here</div>
    <div class="card block">Click Here</div>
    <div class="card block">Click Here</div>
</div>

JavaScript

var cards = document.querySelectorAll(".card");
for (var i = 0; i < cards.length; i++) {
    var card = cards[i];
    card.onclick = function () {
        if (this.classList.contains("block")) {
            this.classList.add("rotated");
            this.classList.remove("block");
        }
        else {
            this.classList.add("block");
            this.classList.remove("rotated");
        }
    };
}

这是 Demo

支持 querySelector/querySelectorAll 的兼容性表: Can I Use