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

Call onClick Function On Multiple Elements

提问by user2163224

I checked out some other posts on here but still couldn't get this issue to work. I have several elements in my html with the class cardContainer:

我查看了此处的其他一些帖子，但仍然无法解决此问题。我的 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>

For each onClick event I would like to call this JS function:

对于每个 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> 

What I would like to do is include the card3 id, so it fires the same function on click. How would I be able to combine the ids "card2" and "card3" in the javascript so the function works?

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

I get that if I use getElementById, I can only get one and not multiple ids/classes, but I tried using getElementsByClassName for example without success. Also looked at other posts but couldn't get this to work based on the suggestions... I am new to Javascript and not quite sure on how to approach this.

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

Thanks for your help!

谢谢你的帮助！

采纳答案by Eder

You can pass the id of the div being clicked on your changeClass function:

您可以传递在您的 changeClass 函数上单击的 div 的 id：

<div id="card3" class="block" onclick="changeClass(this.id)">

This way, it will be easier to handle your class switching process:

这样，处理类切换过程会更容易：

function changeClass(id) {
    var div = document.getElementById(id);
    switch (id) {
        case "card2": {
            if (div.className == "className") {
                div.className = "anotherClassName";
            }

            break;
        }
        case "card3": {
            if (div.className == "block") {
                div.className = "rotated";
            }

            break;
        }

        default: {
            // any other case
        }
    }
}

回答by super

Try this:

试试这个：

HTML

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

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

Here is the Demo

这是演示

Compatibility table for support of querySelector/querySelectorAll: Can I Use

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

回答by Dayan Moreno Leon

use document.getElementsByClassName( doesn't work on ie<9 or FF<3) if you don't care about older browsers and if you do then i suggest you to use jquery, or just sizzle.js to use css selectors

如果您不关心旧浏览器，请使用 document.getElementsByClassName( 不适用于 ie<9 或 FF<3)，如果您这样做，我建议您使用 jquery，或者只使用 sizzle.js 来使用 css 选择器

回答by Trent

I think you're looking for something like this?. (assuming you're ok with using jQuery)

我想你正在寻找这样的东西？（假设您可以使用 jQuery）

http://jsfiddle.net/LqpKt/

http://jsfiddle.net/LqpKt/

<div class="cardContainer">
  <div id="card1" class="block"></div>
</div>
<div class="cardContainer">
  <div id="card2" class="block"></div>
</div>
<div class="cardContainer">
  <div id="card3" class="block"></div>
</div>

<div id="output"></div>

$('.cardContainer').click(function(e){
    var name = $(this).find('.block').attr('id');
    $('#output').append($('<div>').html('clicked ' + name));
})