javascript - 我怎样才能 .toggle ("flip") 只有父元素？

Question

我是 JavaScript 的初学者。下面是我在 JSFiddle 上找到的一些代码

$(document.body).on('click', '.button', function() {
     console.log("CLICK");
     document.querySelector('.card').classList.toggle("flip");
});

我正在尝试拥有多个可以单独翻转的元素。我想在该元素内使用一个按钮来触发仅该父元素的翻转。我不知道从哪里开始，所以我真的希望你们能帮助我。

Answer 1

如果您正在寻找原生 js 解决方案。这是要走的路:

var button = document.getElementsByClassName("button");
for (var i = 0; i < buttons.length; i++) {
    buttons.item(i).addEventListener("click", function () {
         this.parentNode.parentNode.classList.toggle("flip");
    });
}