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

Question

我最近在学习javascript，我的代码有点问题。

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

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

例子: 单击 wrapper1 元素内的 trigger1 显示 redbox1 元素， trigger2 inside 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 信息。无论是否有相同数量的 child ，此方法都有效，并且始终显示正确的 child 。

此外，最好不要使用内联 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>