如何使得多个具有相同类名的元素响应点击事件？

Question

我正在尝试在多个方块上实现翻转效果，每次用户单击它时，这有点像仪表板类型的网页的开头。我如何使一个点击事件对同一名称的多个类起作用？

所有的方块都有相同的类名，但在不同的“box”div下，jQuery的点击事件似乎只在最后添加的方块中生效，而其他方块则保持静止。我无法弄清是什么原因导致了这种情况，我一直在寻找答案。这是点击事件代码的最后修订版：

var i = 0,
abbrs = document.getElementsByClassName("tile"),
len = abbrs.length;

function addEvent(abbr) {
    abbr.addEventListener("click", function(event) {
        $(this).toggleClass("flip");
    })

}

for (i; i < len; i++){

    addEvent(abbrs[i]);
}

我似乎无法找出问题的根源所在。

- user11439800

---

你的代码看起来已经实现了需要的功能？https://jsfiddle.net/L952e38a/ - Becky

这很奇怪，也许所有类都在不同的“box” div中是导致问题的原因？ - user11439800

可能是。你可以编辑帖子以获得更多帮助。祝一切顺利！ - Becky

Answer 1

考虑使用 这个 Codepen 来实现一个纯 JavaScript 的解决方案。

<p class="target">flip me</p>
<p class="target">flip me</p>
<p class="target">flip me</p>

.flipped {
  color: red;
}

const targets = document.getElementsByClassName('target');
for (var i = 0; i < targets.length; i++) {
    targets[i].addEventListener('click', function(){
        this.classList.toggle("flipped");
    })
}

或者考虑 使用jQuery解决方案。保留HTML标签。

<p class="target">flip me</p>
<p class="target">flip me</p>
<p class="target">flip me</p>

.flipped {
  color: red;
}

$('.target').on('click', function() {
  $(this).toggleClass('flipped');
});

编辑：

看完你提供的代码后，我意识到你是通过非常大的填充来定位绝对定位的 div ，这不是正确的做法。而是应该使用 top|right|bottom|left 来进行定位（请参见此处的文档）。更改 CSS 后，即使有混乱的 JavaScript ，你的示例也可以完全正常运行。请看这里

- M8RTAL

---

哇，非常感谢你的帮助，这对我以后的学习肯定是一个宝贵的经验。 - user11439800

Answer 2

注意：这里是您需要执行的基本代码片段。通过点击列出的所有类调用函数以调用显示效果。如果您不想显示效果，则不要添加类。

function callMe(){
    if ($(this).hasClass('flip')){
        $(this).removeClass('flip');//removes flip class
    } else {
         $(this).addClass('flip');//add flip class
    }
}

$(".class1, .class2").click(callMe); //add classes here needs to give effects and call functions

.flip{
  color:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="class1">Class 1</div>
<span class="class2">Class 2</span>

- Parth Raval

Answer 3

我认为用这段代码替换你提供的片段应该可以解决问题：

    $(document).ready(function() {
        $(".tile").click(function() {         
            $(".tile").toggleClass("flip");
        });
    });

根据代码在项目中实际所处的位置，您可能不需要包装“on click”事件监听器的$(document).ready()事件监听器。

- Yves Gurcan

---

这似乎更接近我想要的，但仍然只能在最后一个瓷砖上点击，并且当我只想要逐个翻转时，它会一次性翻转所有瓷砖。感谢您提供的可能解决方案。 - user11439800

我不确定您放置了我建议的代码的位置。您应该确保它位于任何函数之外，因为该代码必须能够在页面加载时执行。如果您可以为瓷砖分配ID，那么可能会更容易一次只翻转一张卡片。或者也可以使用“boxX”类？ - Yves Gurcan