Question

此代码将隐藏第一个div，即使它是从第二个按钮激活的。我应该使用什么关键字来隐藏父div（第一个按钮隐藏第一个div，第二个按钮隐藏第二个div）？

var x = document.getElementsbyClassName(myClass);

function myFunction() {
  x[0].display = "none";
}

<div class="myClass">
  <button onclick="myFunction()">Click</button>
</div>
<div class="myClass">
  <button onclick="myFunction()">Click</button>
</div>

Answer 1

不要试图预测用户会点击哪个元素，而只需使用一个事件监听器，它可以获取与之交互的元素并做出适当的响应：

function hide() {

  // EventTarget.addEventListener() passes the 'this'
  // Node to the function; here 'this' is whichever
  // element was clicked:
  let target = this;

  // here we set the display of the clicked element's
  // parentNode to 'none':
  target.parentNode.style.display = 'none';
}

// here we use document.querySelectorAll(), which takes
// a CSS selector as an argument and returns an Array-Like
// nodeList of the found elements, which is passed to
// nodeList.forEach():
document.querySelectorAll('.myClass > button').forEach(

  // nodeList.forEach() iterates over the supplied nodeList,
  // to perform the supplied actions. Here we use an Arrow
  // function to perform the required action;
  // myClassElement is the current Element of the nodeList over
  // which we're iterating.
  // In the Arrow function we bind an event-listener to listen
  // for a 'click' event, which executes the supplied function
  // in response (note the deliberate omission of the parentheses;
  // we don't pass 'hide()' (unless you want to bind the result of
  // a supplied function):
  myClassElement => myClassElement.addEventListener('click', hide)
);

<div class="myClass">
  <button>Click</button>
</div>
<div class="myClass">
  <button>Click</button>
</div>

在上面的方法中，我使用了一种不引人注目的JavaScript方法，将事件处理程序从HTML中移出到JavaScript中，这对于“漂亮”的HTML更好，但从代码维护的角度来看，它也更好：它可以防止你必须在HTML中找到函数的所有提及，以删除事件监听器，或者将它们更新为新函数。

顺便说一下，上面的代码应该在文档末尾的<script>标记中，在结束</body>标记之前，或者在{的就绪事件处理程序中{1}}文件;否则 - 当JavaScript运行时遇到 - 当绑定事件监听器时，您希望绑定事件的元素将不会出现在DOM中。

Answer 2

如果您将事件传递给点击处理程序，则可以通过event.target.parentElement访问父元素：

function myFunction(event) {
    event.target.parentElement.style.display = "none";
}

<div class="myClass">
    <button onclick="myFunction(event)">Click</button>
</div>
<div class="myClass">
    <button onclick="myFunction(event)">Click</button>
</div>

Answer 3

在javascript中，您只需使用this和parentElement即可。只需按下按钮点击参考，然后使用parentElement将其隐藏起来

function myFunction(obj) {
    obj.parentElement.style.display = "none";
}

<div class="myClass">
    <button onclick="myFunction(this)">Click</button>
</div>
<div class="myClass">
    <button onclick="myFunction(this)">Click</button>
</div>

P.S 在对任何元素使用style之前，您必须使用display

Answer 4

类似于David Thomas的答案，但是我会检查按钮本身是否被点击，而不是div：

HTML

<div class="myClass">
  <button>Click</button>
</div>

JS

var buttons = document.querySelectorAll('.myClass button');

buttons.forEach(button => {
  button.addEventListener('click', myFunction, false);
});

function myFunction() {
  this.parentNode.style.display = "none";
}

<强> DEMO

Answer 5

这应该做的工作：

<强> HTML：

<div class="myClass">
  <button>Click</button>
</div>
<div class="myClass">
  <button>Click</button>
</div>

<强> JS：

var btns = document.getElementsByTagName("button");

for (var i = 0; i < btns.length; i++) {
  btns[i].onclick = function() {
    this.parentElement.style.display = "none";
  }
}

从getElementsbyClassName中选择当前元素

5 个答案: