我如何才能.toggle(“倒装”)仅父元素？

Question

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

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

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

Answer 1

document.querySelector

返回与指定的选择器组匹配的文档中的第一个元素(使用文档节点的深度优先预先遍历)。

当前代码总是切换文档中的第一个.card元素。

你想让每一张卡片的按钮翻转那张卡片。您知道卡片是您想要触发其翻转的按钮的祖先，所以当单击按钮时，单击该按钮的祖先类card:

$('.button').on('click', function () {
    $(this).closest('.card').toggleClass("flip");
});

演示

备注：

• 我将您的选择器从document.body更改为仅.button元素。若要选择所有按钮(允许您删除class="button" )，请删除句点(即$('button') )
• .closest('selector')返回该选择器组中最近的祖先元素。
• .toggleClass()比.classList.toggle()干净

Answer 2

如果您正在寻找本地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");
    });
}