Question

我尝试从具有相同类的div子项中创建一个触发器按钮，但我的代码似乎无法正常工作，我尝试首先进行循环以获取类框，然后尝试从每个框中获取子项，但似乎没有用。

＆＃13;

var container = document.querySelector(".container");

var box = document.getElementsByClassName("box");

for(var i = 0; i < box.length; i++){
  var x = box[i].children;
  x.addEventListener("click", function(){
    console.log('hello world')
  })
}

＆＃13;

.container {
  border: 1px solid black;
  padding: 10px;
}
.box {
  width: 100px;
  height: 100px;
  background: red;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="container">
    <div class="box">
      <button class="btn">click me</button>
    </div>
    <div class="box">
      <button class="btn">click me</button>
    </div>
    <div class="box">
      <button class="btn">click me</button>
    </div>
    <div class="box">
      <button class="btn">click me</button>
    </div>
  </div>
</body>
</html>

＆＃13;

Answer 1

首先尝试进行循环以获取类框，然后尝试获取每个盒子里的孩子，但似乎不起作用。

children返回元素列表，您需要访问第一个（按钮）

var x = box[i].children[0];

<强>演示

＆＃13;

var container = document.querySelector(".container");

var box = document.getElementsByClassName("box");

for(var i = 0; i < box.length; i++){
  var x = box[i].children[0];
  x.addEventListener("click", function(){
    console.log('hello world')
  })
}

＆＃13;

.container {
  border: 1px solid black;
  padding: 10px;
}
.box {
  width: 100px;
  height: 100px;
  background: red;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="container">
    <div class="box">
      <button class="btn">click me</button>
    </div>
    <div class="box">
      <button class="btn">click me</button>
    </div>
    <div class="box">
      <button class="btn">click me</button>
    </div>
    <div class="box">
      <button class="btn">click me</button>
    </div>
  </div>
</body>
</html>

＆＃13;

注意

如果每个button中有多个box，那么您需要迭代children。

Answer 2

box[i].children正在返回一个集合（请参阅https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/children）

你需要遍历它以获得每个节点。

或者更好，使用querySelector访问您想要的节点：

＆＃13;

var container = document.querySelector(".container");

var box = document.getElementsByClassName("box");

for(var i = 0; i < box.length; i++){
  var button = box[i].querySelector('button');
  button.addEventListener("click", function(){
     console.log('hello world')
  })
}

＆＃13;

.container {
  border: 1px solid black;
  padding: 10px;
}
.box {
  width: 100px;
  height: 100px;
  background: red;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="container">
    <div class="box">
      <button class="btn">click me</button>
    </div>
    <div class="box">
      <button class="btn">click me</button>
    </div>
    <div class="box">
      <button class="btn">click me</button>
    </div>
    <div class="box">
      <button class="btn">click me</button>
    </div>
  </div>
</body>
</html>

＆＃13;

Answer 3

如果你使用querySelectorAll，你可以简化很多。

querySelectorAll将CSS选择器作为参数，并且可以非常轻松地将节点列表缩小到您想要的元素，例如： button的。{/ p>

Stack snippet

var buttons = document.querySelectorAll(".container .box button");

for(var i = 0; i < buttons.length; i++){
  buttons[i].addEventListener("click", function(){
    console.log('hello world')
  })
}

.container {
  border: 1px solid black;
  padding: 10px;
}
.box {
  width: 100px;
  height: 100px;
  background: red;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="container">
    <div class="box">
      <button class="btn">click me</button>
    </div>
    <div class="box">
      <button class="btn">click me</button>
    </div>
    <div class="box">
      <button class="btn">click me</button>
    </div>
    <div class="box">
      <button class="btn">click me</button>
    </div>
  </div>
</body>
</html>

或者像这样，使用btn类

Stack snippet

var buttons = document.querySelectorAll(".container .btn");

for(var i = 0; i < buttons.length; i++){
  buttons[i].addEventListener("click", function(){
    console.log('hello world')
  })
}

.container {
  border: 1px solid black;
  padding: 10px;
}
.box {
  width: 100px;
  height: 100px;
  background: red;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="container">
    <div class="box">
      <button class="btn">click me</button>
    </div>
    <div class="box">
      <button class="btn">click me</button>
    </div>
    <div class="box">
      <button class="btn">click me</button>
    </div>
    <div class="box">
      <button class="btn">click me</button>
    </div>
  </div>
</body>
</html>

Answer 4

children方法返回一个匹配元素数组，您必须指定要添加事件的元素，即使它是一个需要指示的孩子x[0].addEventListener()

这可能适用于任何数量的儿童：

var container = document.querySelector(".container");
var box = document.getElementsByClassName("box");

for(var i = 0; i < box.length; i++){
  var x = box[i].children;

  for (let i=0; i < x.length; i++) {
    x[i].addEventListener("click", function(){
      console.log('hello world')
    })
  }
}

如何在具有相同类名的div中获取子元素

4 个答案: