如何在另一个阵列上打开等效阵列号？

Question

首先对这个标题感到抱歉。也许这不是解释我的问题的最好方法。另外，我尝试浏览了建议的帖子，但我无法完全理解它们。

我正在尝试拥有以下内容。

一个包含来自 DOM 的元素的数组，它给出：

var boxes = ["box1", "box2", "box3"]

还有一个带有弹出窗口的数组，display:none

var 弹出窗口 = ["pop1", "pop2", "pop3"]

我想在单击框[i] 时打开弹出窗口[i]。

所以我的问题是如何保存给我 [i] 的事件，以便我可以在弹出窗口中打开完全相同的 [i]。

很抱歉没有使用代码，但我认为它会更复杂。不过，请随意构建它：

var boxes = document.getElementsByClassName("box");
var popupss = document.getElementsByClassName("pop");

.wrapper {
  display: flex;
  justify-content:space-between;
}

.box {
  cursor:pointer;
  display:flex;
  justify-content:center;
  align-items:center;
  background-color: #FC543A;
  padding: 50px;
  border-radius: 3px;
}

.wrapper2 {
  display:flex;
  justify-content:center;
  background-color: rgba(0,0,0,0.4);
  position:fixed;
  height:100%;
  width:100%;
  z-index:2;
  overflow:auto;
}

.pop {
  margin-top:6em;
  background-color:white;
  height: 50px;
  width: 80%;
  display:none;
  justify-content:center;
  align-items:center;
}

.hide {
  display:none;
}

.show {
  display:flex;
}

<div class="wrapper">
  <div id="box1" class="box">Box1</div>
  <div id="box2" class="box">Box2</div>
  <div id="box3" class="box">Box3</div>
</div>

<div class="wrapper2">
  <div class="pop" id="pop1">
  Pop1!
  </div>
  
  <div class="pop" id="pop2">
  Pop2!
  </div>
  
  <div class="pop" id="pop3">
  Pop3!
  </div>
</div>

谢谢！

Answer 1

尝试这样的事情：

const boxes = document.querySelectorAll('.box')
const popups = document.querySelectorAll('.pop')

const doSthAbPopup = popupIndex => {
  // Replace this with whatever you want to do with the popups
  console.log(popups[popupIndex].textContent)
}

[...boxes].forEach((box, index) => {
  box.addEventListener('click', () => {
    doSthAbPopup(index)
  })
})

您可能需要添加一些检查以确保您拥有相同数量的方框和弹出窗口。

forEach 对此有好处，因为它提供了对 index.

的关闭

Answer 2

您并没有真正采用最佳方法。每当您发现自己在重复代码时，请停下来深呼吸。无需创建 HTML 的 3 个 pop 部分。您应该只为弹出消息设置一个 HTML 占位符，并将该消息的可能值保存在 JavaScript 数组中。这使得 HTML 更干净，并且不需要 .hide CSS class.

然后，您只需为每个框分配一个点击事件函数，将相应的弹出消息（来自数组）设置到弹出占位符中。

// Store possible pop messages:
var popMessages = ["Pop1!", "Pop2!", "Pop3!"];

// Get reference to pop placeholder
var pop = document.getElementById("pop");

// Use .querySelectorAll() instead of .getElementsByClassName
// since the latter doesn't perform as well due to returning
// a "live" node list. Also, convert the returned node list
// into a proper array, so that .forEach() can be used on it.
var boxes = Array.prototype.slice.call(document.querySelectorAll(".box"));

// Loop over the boxes
boxes.forEach(function(box, index){
  // Set each box to have a click event handling function
  box.addEventListener("click", function(){
    // Use the pop message corresponding to the index of the box being clicked.
    pop.textContent = popMessages[index];
  });
});

.wrapper {
  display: flex;
  justify-content:space-between;
}

.box {
  cursor:pointer;
  display:flex;
  justify-content:center;
  align-items:center;
  background-color: #FC543A;
  padding: 50px;
  border-radius: 3px;
}

.wrapper2 {
  display:flex;
  justify-content:center;
  background-color: rgba(0,0,0,0.4);
  position:fixed;
  height:100%;
  width:100%;
  z-index:2;
  overflow:auto;
}

.show {
  display:flex;
}

<div class="wrapper">
  <div id="box1" class="box">Box1</div>
  <div id="box2" class="box">Box2</div>
  <div id="box3" class="box">Box3</div>
</div>

<div class="wrapper2">
  <div class="pop" id="pop"></div>
</div>

Answer 3

以下内容（大量评论）可助您一臂之力。堆栈代码段隐藏了结果，因此展开到整页。

javascript 使用的函数：

//select all divs with class box and iterate them
Array.prototype.forEach.call(document.querySelectorAll("div.box"), function(element, index) {
  //we use Array.prototype.map and use call to pass the node list into the map function to iterate

  //assign click handlers
  //when an element is clicked it will fire the function boxHandler. We use bind to pass the index of the element to the function.
  element.addEventListener("click", boxHandler.bind(element, index), true);

  //hide all pops
  document.querySelectorAll("div.pop")[index].classList.add("hide");
});

function boxHandler(index) {
  //select the div based upon the index. 
  var pop = document.querySelectorAll("div.pop")[index];
  if (pop.getAttribute("data-clicked") != 1) {
    //add show to class using classlist.add
    pop.classList.add("show");
    pop.classList.remove("hide");
    pop.setAttribute("data-clicked", 1);
  } else {
    pop.classList.remove("show");
    pop.classList.add("hide");
    pop.setAttribute("data-clicked", 0);
  }

}

.wrapper {
  display: flex;
  justify-content: space-between;
}

.box {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #FC543A;
  padding: 50px;
  border-radius: 3px;
}

.wrapper2 {
  display: flex;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.4);
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: 2;
  overflow: auto;
}

.pop {
  margin-top: 6em;
  background-color: white;
  height: 50px;
  width: 80%;
  display: none;
  justify-content: center;
  align-items: center;
}

.hide {
  display: none;
}

.show {
  display: flex;
}

<div class="wrapper">
  <div id="box1" class="box">Box1</div>
  <div id="box2" class="box">Box2</div>
  <div id="box3" class="box">Box3</div>
</div>

<div class="wrapper2">
  <div class="pop" id="pop1">
    Pop1!
  </div>

  <div class="pop" id="pop2">
    Pop2!
  </div>

  <div class="pop" id="pop3">
    Pop3!
  </div>
</div>

如何在另一个阵列上打开等效阵列号？

How to open equivalent array number on another array?

javascript

arrays

var