onClick javascript函数仅显示包装器的第一个孩子

Question

这些天我在学习 javascript，但我的代码有点问题。

我在页面上有三个元素 wrapper1、wrapper2 和 wrapper3，每个元素都有 trigger 和 redbox 元素。

我的目标是当trigger被点击时，它会显示与数字对应的redbox元素。

示例： 在wrapper1 元素内单击trigger1 会显示redbox1 元素， trigger2 内的 wrapper2 元素显示 redbox2 元素等。

问题是，例如，当我单击 trigger3 时，它总是显示 redbox1 元素。 （如示例所示）。

我做错了什么？我只是一个初学者。

function showTheRedBox() {
  var theRedBox = document.getElementsByClassName('redbox');
  theRedBox[0].style.display = 'block';
}

body {background: #222;}
.wrapper {
  background: yellow;
  width: 100px;
  height: 100px;
}
.trigger {
  background: blue;
  width: 50px;
  height: 50px;
  position: absolute;
  margin-top: 50px;
  margin-left: 50px;
}
.redbox {
  background: red;
  width: 200px;
  height: 100px;
  margin-left: 100px;
  position: absolute;
  display: none;
}

<div class="wrapper">
  <div class="trigger" onclick="showTheRedBox();">trigger1</div>
  <div class="redbox">hurrah1</div>
wrapper1</div>
<div class="wrapper">
  <div class="trigger" onclick="showTheRedBox();">trigger2</div>
  <div class="redbox">hurrah2</div>
wrapper2</div>
<div class="wrapper">
  <div class="trigger" onclick="showTheRedBox();">trigger3</div>
  <div class="redbox">hurrah3</div>
wrapper3</div>

Answer 1

您可以使用 for 循环和闭包来访问每个 onclick 事件的 .wrapper 信息。无论是否有相同数量的孩子，此方法都有效，并且始终显示正确的孩子。

此外，最好不要使用内联 JavaScript 属性（例如 onclick="showTheRedBox();"），您应该始终在脚本中分配事件处理程序以提高可读性和可维护性。

var wrappers = document.querySelectorAll('.wrapper'), i;
var redboxes = document.querySelectorAll('.redbox');

for(i = wrappers.length - 1; i >= 0; --i) {
  (function(wrapper){
    wrapper.querySelector('.trigger').onclick = function() {
      hideAll();
      wrapper.querySelector('.redbox').style.display = 'block';
    }
  })(wrappers[i]);
}

function hideAll() {
  for(i = redboxes.length - 1; i >= 0; --i) {
    redboxes[i].style.display = 'none';
  }
}

var wrappers = document.querySelectorAll('.wrapper'), i;
var redboxes = document.querySelectorAll('.redbox');

for(i = wrappers.length - 1; i >= 0; --i) {
  (function(wrapper){
    wrapper.querySelector('.trigger').onclick = function() {
      hideAll();
      wrapper.querySelector('.redbox').style.display = 'block';
    }
  })(wrappers[i]);
}

function hideAll() {
  for(i = redboxes.length - 1; i >= 0; --i) {
    redboxes[i].style.display = 'none';
  }
}

body {background: #222;}
.wrapper {
  background: yellow;
  width: 100px;
  height: 100px;
}
.trigger {
  background: blue;
  width: 50px;
  height: 50px;
  position: absolute;
  margin-top: 50px;
  margin-left: 50px;
}
.redbox {
  background: red;
  width: 200px;
  height: 100px;
  margin-left: 100px;
  position: absolute;
  display: none;
}

<div class="wrapper">
  <div class="trigger">trigger1</div>
  <div class="redbox">hurrah1</div>
wrapper1</div>
<div class="wrapper">
  <div class="trigger">trigger2</div>
  <div class="redbox">hurrah2</div>
wrapper2</div>
<div class="wrapper">
  <div class="trigger">trigger3</div>
  <div class="redbox">hurrah3</div>
wrapper3</div>

---

此方法也可以，但它会使用更多的内存，因为它比上述解决方案多次查询 DOM。

var wrappers = document.querySelectorAll('.wrapper'), i;
var redboxes = document.querySelectorAll('.redbox');

for(i = wrappers.length - 1; i >= 0; --i) {
  wrappers[i].querySelector('.trigger').onclick = function() {
    hideAll();
    this.parentNode.querySelector('.redbox').style.display = 'block';
  }
}

function hideAll() {
  for(i = redboxes.length - 1; i >= 0; --i) {
    redboxes[i].style.display = 'none';
  }
}

var wrappers = document.querySelectorAll('.wrapper'), i;
var redboxes = document.querySelectorAll('.redbox');

for(i = wrappers.length - 1; i >= 0; --i) {
  wrappers[i].querySelector('.trigger').onclick = function() {
    hideAll();
    this.parentNode.querySelector('.redbox').style.display = 'block';
  }
}

function hideAll() {
  for(i = redboxes.length - 1; i >= 0; --i) {
    redboxes[i].style.display = 'none';
  }
}

body {background: #222;}
.wrapper {
  background: yellow;
  width: 100px;
  height: 100px;
}
.trigger {
  background: blue;
  width: 50px;
  height: 50px;
  position: absolute;
  margin-top: 50px;
  margin-left: 50px;
}
.redbox {
  background: red;
  width: 200px;
  height: 100px;
  margin-left: 100px;
  position: absolute;
  display: none;
}

<div class="wrapper">
  <div class="trigger">trigger1</div>
  <div class="redbox">hurrah1</div>
wrapper1</div>
<div class="wrapper">
  <div class="trigger">trigger2</div>
  <div class="redbox">hurrah2</div>
wrapper2</div>
<div class="wrapper">
  <div class="trigger">trigger3</div>
  <div class="redbox">hurrah3</div>
wrapper3</div>

Answer 2

您遇到的问题是“getElementsByClassName”方法返回一个包含该类所有元素的数组。所以，当你这样做时：

theRedBox[0].style.display = 'block'

您正在更改数组的 First 元素的显示样式，在本例中为“wrapper1”。

这是一个与其他包装器一起运行的修改版本：

<!DOCTYPE html>
<html lang = 'es'>
    <head>
        <title> MY TEST </title>
        <style>
            body {
                background: #222;
            }
            .wrapper {
              background: yellow;
              width: 100px;
              height: 100px;
            }
            .trigger {
              background: blue;
              width: 50px;
              height: 50px;
              position: absolute;
              margin-top: 50px;
              margin-left: 50px;
            }
            .redbox {
              background: red;
              width: 200px;
              height: 100px;
              margin-left: 100px;
              position: absolute;
              display: none;
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
          <div class="trigger" onclick="showTheRedBox(0)">trigger1</div> <!-- When the onClick event is trigered the function "showTheRedBox receives a parameter , that parameter is the position of the element in the Array "theRedBox"-->
          <div class="redbox">hurrah1</div>
        wrapper1
        </div>

        <div class="wrapper">
            <div class="trigger" onclick="showTheRedBox(1)">trigger2</div>
            <div class="redbox">hurrah2</div>
        wrapper2
        </div>

        <div class="wrapper">
              <div class="trigger" onclick="showTheRedBox(2)">trigger3</div>
              <div class="redbox">hurrah3</div>
        wrapper3</div>

        <script>

            function showTheRedBox(wrapperNumber) {
                  var theRedBox = document.getElementsByClassName('redbox');
                  theRedBox[wrapperNumber].style.display = 'block';
                }
        </script>
    </body>
</html>