Question

在我的一个项目中，我制作了3个画廊，但我想将它们放在相同位置的同一页面上，而不是同时放在同一个页面上。为此，我选择创建3个按钮。例如，当我点击第一个按钮时，应该出现第一个图库（两个图库最初都在显示：none），然后当我点击第二个按钮时，第二个按钮应该出现，之前显示的那个应该消失，所以为每个画廊。我制作了一个简化的页面副本，使思考更容易。

一般来说，我的问题是我不太清楚如何将函数应用于数组中除一个元素之外的所有元素。

以下是代码：

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>Galleries</title>
 <link rel="stylesheet" type="text/css" href="gs.css">
 <style type="text/css">
  body{
   background-color:royalblue;
  }
  header{
   text-align: center;
  }
  article{
   width:95%;
   margin:auto 2.5% auto 2.5%;
   height:850px;
   background-color:tomato;
   display:none;
  }
 </style>
</head>
<body>
 <header>
  <button>Third Gallery</button>
  <button>Second Gallery</button>
  <button>Third Gallery</button>
 </header>
 <section>
  <article>
   <h1>This is the first gallery</h1>
  </article>


  <article>
   <h1>This is the second gallery</h1>
  </article>


  <article>
   <h1>This is the third gallery</h1>
  </article>
 </section>



 <script type="text/javascript">
  var button=document.getElementsByTagName('button');
  var gallery=document.getElementsByTagName('article');
  for(var i=0; i<button.length; i++){
   (function(index){
    button[index].onclick=function(){
     gallery[index].style.display="block";
      }
     }(i));
    }
 </script>
</body>
</html>

Answer 1

您可以迭代所有元素，并将按钮的index与当前图库项目的index进行比较：

[].forEach.call(gallery, function (el, i) {
  el.style.display = i === index ? 'block': 'none';
});

或：

for (var i = 0; i < gallery.length; i++) {
  gallery[i].style.display = i === index ? 'block': 'none';
}

这将循环遍历所有元素，并将每个元素的display设置为none，除了带有与所点击按钮对应的index的on。

Example Here

var button = document.getElementsByTagName('button');
var gallery = document.getElementsByTagName('article');
for (var i = 0; i < button.length; i++) {
  (function(index) {
    button[index].onclick = function() {
      [].forEach.call(gallery, function (el, i) {
        el.style.display = i === index ? 'block': 'none';
      });
    }
  }(i));
}

Answer 2

你所做的几乎是正确的......循环遍及整个事物，当特定元素出现时，不要这样做，但我不明白这里使用的是什么：< / p>

var button=document.getElementsByTagName('button');
var gallery=document.getElementsByTagName('article');
for(var i=0; i<button.length; i++){
  if (i != 2) // Make sure `i` is not equal to 2.
    (function(index){
      button[index].onclick=function(){
        gallery[index].style.display="block";
      }
    }(i));
  }

将JavaScript函数应用于除第i个元素之外的所有Array元素

2 个答案: