我怎样才能（只翻动）父母元素？

我是JavaScript的初学者。下面是一些代码，我在JSFiddle 我怎样才能（只翻动）父母元素？

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

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

来源

2014-01-08 Aron Martin

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()

来源

2014-01-08 23:21:16 Trojan

非常感谢很好的解释木马！大约半小时前我已经做了这样的事情，但它仍然无法工作！我想因为我不知道我在做什么。你已经让我更清楚了！ :) –

@AronMartin很高兴我能帮到你。如果你不想包含jQuery库，那么emphaticsunshine的答案会在纯粹的原生JavaScript中做你想做的。（你必须担心的唯一的方法是如果你改变你的HTML布局，以便卡不完全是按钮的祖父母。） – Trojan

如果您正在寻找为原生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"); 
    }); 
}

来源

2014-01-08 23:30:06 emphaticsunshine

原生JS的一部分不**使其原生JS。这仍然依赖于jQuery。编辑它以使用'getElementsByClassName（）'和'onclick = function（）{'，我会赞成这是一个有用的答案。 – Trojan

他唯一使用jQuery的是事件绑定。如果你是一个js开发者，你知道你不需要使用一个库来进行事件绑定。 – emphaticsunshine

这是真的;然而，你不能声称这是纯粹的JavaScript。 OP表示他是初学者;怎么样才能阻止他承认这是本地人？更新：很好的答案。 +1 – Trojan

我怎样才能（只翻动）父母元素？

回答

相关问题