使用Java脚本通过孩子的按钮更改父类

Question

我基本上要问的是我是否可以这样做？

 function Close(){ // what the furry mermaids should i put in here!? } 

 .vissible { display: block; } .hidden { display: none; } #parentDiv1{ background-color: red; } #parentDiv2{ background-color:blue; } 

 <div id="parentDiv1" class="visible"> <button id="closebtn" onclick="Close()">close</button> <p> This is div 1 </p> </div> <div id="parentDiv2" class="visible"> <button id="closebtn" onclick="Close()">close</button> <p> This is div 2 </p> </div> 

有两个包含相同按钮的div，但是每个按钮将其父div的类更改为隐藏。 仅其父母的div。 这是因为我要创建很多页面，但是它们使用相同的代码和相同的按钮一个一个地关闭。 我想要一个极简的解决方案。

哦，请不要模糊你的答案。 如果您要展示它，请解释它如何工作以及如何应用。 需要一个工作代码示例。

注意：只能使用一种功能，由两个相同的按钮（由两个Divs隔开）使用。

谢谢，麻烦您了！ ：D

Answer 1

在close函数中传递event ，并使用event.target.parentNode访问父对象；

 function Close(event){ const parent= event.target.parentNode parent.classList.remove('vissible'); parent.classList.add('hidden'); // what the furry mermaids should i put in here!? } 

 .vissible { display: block; } .hidden { display: none; } #parentDiv1{ background-color: red; } #parentDiv2{ background-color:blue; } 

 <div id="parentDiv1" class="visible"> <button id="closebtn" onclick="Close(event)">close</button> <p> This is div 1 </p> </div> <div id="parentDiv2" class="visible"> <button id="closebtn" onclick="Close(event)">close</button> <p> This is div 2 </p> </div> 

Answer 2

您可以通过当前元素上下文this对方法。 然后可以使用parentNode属性访问父div。 要操纵元素的类，请使用Element.classList属性。

function Close(elem) {
   elem.parentNode.classList.add('hidden')
   elem.parentNode.classList.remove('visible')
}

 function Close(elem) { elem.parentNode.classList.add('hidden') elem.parentNode.classList.remove('visible') } 

 .vissible { display: block; } .hidden { display: none; } #parentDiv1 { background-color: red; } #parentDiv2 { background-color: blue; } 

 <div id="parentDiv1" class="visible"> <button id="closebtn" onclick="Close(this)">close</button> <p>This is div 1</p> </div> <div id="parentDiv2" class="visible"> <button id="closebtn" onclick="Close(this)">close</button> <p>This is div 2</p> </div> 

我建议您使用不显眼的事件处理程序。 而不是使用丑陋的内联单击处理程序。

 document.addEventListener("DOMContentLoaded", function(event) { var elements = document.querySelectorAll('.closebtn'); elements.forEach(function(element) { element.addEventListener('click', function() { this.parentNode.classList.add('hidden'); this.parentNode.classList.remove('visible'); }) }); }); 

 .vissible { display: block; } .hidden { display: none; } #parentDiv1 { background-color: red; } #parentDiv2 { background-color: blue; } 

 <div id="parentDiv1" class="visible"> <button type="button" class="closebtn">close</button> <p>This is div 1</p> </div> <div id="parentDiv2" class="visible"> <button type="button" class="closebtn">close</button> <p>This is div 2</p> </div> 

Answer 3

干得好 ：）

https://jsfiddle.net/

$('#parentDiv1 #closebtn').on('click', function(){
    $(this).parent().addClass('hidden')
})

$('#parentDiv2 #closebtn').on('click', function(){
    $(this).parent().addClass('hidden')
})

Answer 4

这就是我会做的。 使用这样的东西。

$(".closebtn").click(function(){
    $(this).parent().removeClass("visible");
    $(this).parent().addClass("hidden");
});

同样在您的CSS中，您的班级拼写可见，而在您的html中，班级拼写可见