onClick javascript函数只显示包装器的第一个子节点

Question

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

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

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

实施例： 点击trigger1元素中的wrapper1元素会显示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';
  }
}

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这个方法也可以使用，但是它会比上面的解决方案更多地使用更多的内存来查询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';
  }
}

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

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>