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

Answer 2

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

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

这样，处理班级转换过程会更容易：

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
        }
    }
}

Answer 3

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

Answer 4

我认为你正在寻找这样的东西？（假设你使用jQuery就可以了）

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

在多个元素上调用onClick函数

4 个答案:

HTML

的JavaScript