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

Answer 2

document.querySelector：

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

您当前的代码始终切换文档中的第一个 .card元素。

您希望每张卡片的按钮都能翻转该卡片。您知道该卡是您想要触发其翻转的按钮的祖先，因此当单击按钮时，翻转该按钮的类card:的祖先

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

Demo

注意：

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

我怎么能.toggle（“翻转”）只有父元素？

2 个答案: