Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

有两个div包含相同的按钮，但每个按钮将其父div的类改为隐藏。他们的父母只有div。这是因为我想制作很多页面但是它们使用相同的代码和相同的按钮逐个关闭。我在这里想要一个极简主义的解决方案。

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

注意：只能使用一个功能，并由两个相同的按钮使用，这两个按钮由两个Div分隔。

请和谢谢！：d

Answer 1

在关闭功能中传递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')
}

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

你走了:)）

https://jsfiddle.net/

var text = row.cells[i].textContent.toLowerCase()

Answer 4

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

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

同样在你的CSS中，你的课程拼写为可变的，并且在你的HTML中，它拼写为可见的课程

使用Javascript

4 个答案: