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

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

javascript html css arrays

将JavaScript函数应用于除第i个元素之外的所有数组元素,javascript,html,css,arrays,Javascript,Html,Css,Arrays,在我的一个项目中，我制作了3个图库，我想把它们放在同一页的同一个位置，而不是在同一时间。为了实现这一点，我选择创建3个按钮。例如，当我单击第一个按钮时，第一个图库应该出现（两个图库最初都显示：无），然后当我单击第二个按钮时，第二个图库应该出现，前面显示的图库应该消失，对于每个图库也是如此。我把这一页做了一个简化副本，使思考更容易一般来说，我的问题是我不太知道如何将函数应用于数组中除一个元素之外的所有元素代码如下： <!DOCTYPE html> <html> <

在我的一个项目中，我制作了3个图库，我想把它们放在同一页的同一个位置，而不是在同一时间。为了实现这一点，我选择创建3个按钮。例如，当我单击第一个按钮时，第一个图库应该出现（两个图库最初都显示：无），然后当我单击第二个按钮时，第二个图库应该出现，前面显示的图库应该消失，对于每个图库也是如此。我把这一页做了一个简化副本，使思考更容易

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

代码如下：

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


画廊
身体{
背景颜色：皇家蓝；
}
标题{
文本对齐：居中；
}
文章{
宽度：95%；
利润率：自动2.5%自动2.5%；
高度：850px；
背景色：番茄；
显示：无；
}
第三画廊
第二画廊
第三画廊
这是第一个画廊
这是第二个画廊
这是第三个画廊
var button=document.getElementsByTagName（'button'）；
var gallery=document.getElementsByTagName（'article'）；
对于（var i=0；i您所做的几乎是正确的…循环整个过程，当特定元素出现时，不要这样做，但我不理解闭包在这里的用途：
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));
  }

var-button=document.getElementsByTagName（'button'）；
var gallery=document.getElementsByTagName（'article'）；
对于（var i=0；i您可以迭代所有元素，并将按钮的索引
与当前库项目的索引
进行比较：
[].forEach.call(gallery, function (el, i) {
  el.style.display = i === index ? 'block': 'none';
});

或：
可能会有帮助。否则，每当执行onclick
时，可能需要重复闭包i
将始终是button.length-1。如果您不知道它的作用，为什么要编写代码？嗨，谢谢您的回复。我尝试了您的代码版本，但它仍然不会改变结果：（关于闭包，我不知道有什么正确的解释，但是如果你尝试不闭包的代码，for循环中使用的“I”不适用于gallery数组，它只适用于button数组。所以我想闭包是编程影响“I”的方式。）所有在相关代码块中使用的不同数组。嗨，谢谢你，你的代码正按照我的需要完美地工作。我仍然需要了解其中的一些细节，因为我是一个初学者，还有一些事情我还没有真正掌握。
for (var i = 0; i < gallery.length; i++) {
  gallery[i].style.display = i === index ? 'block': 'none';
}

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