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

2018-07-01 23:47:03

在我的一个项目中，我制作了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>

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

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

你可以遍历所有的元素和比较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除了on与对应于单击按钮的index 。

示例在这里

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

链接地址: http://www.djcxy.com/p/89185.html

上一篇: Apply a JavaScript function to all Array elements except the ith element

下一篇: How can I combine 2 SQL queries and retrieve a cumulative count?