只包括闭包的 FOR 循环仍然只显示最后一张图片

Question

晚上好，
我的网上有很多文章（我自己动手制作的手册如何创建...），其中散布着图片（它是用捷克语写的）。这些图片很小，我想在 html 中使用 onclick 将它们显示得更大，总是接近那些小的。 IE。每个更大的图片都将展示在他的小图片旁边。这是一个实际的例子： http://mix.zlatberry.cz/obrazky1.html（点击大图 - 无意中在站点末尾 - 它已关闭）。 但是，单击任何小图片只会显示最后一张大图片！ 目前我知道只有所谓的关闭才能解决我的问题，但是尽管有这个技巧，我还是不能强迫我的迭代在第一个小图旁边显示第一张大图，在第二个小图旁边显示第二张大图，依此类推，以此类推。

HTML（不是我的想法）。顺便说一句，是否可以编写此代码 - 小图与大图 - 更简单的方法？？

let obr = new Array('velka-fotka1', 'velka-fotka2', 'velka-fotka3', 'velka-fotka4', 'velka-fotka5');

for (let i = 0; i < obr.length; i++) {
  (function() {
    let x = i;
    let fotka = document.getElementById(obr[x]);

    function ZobrazFotku() {
      fotka.style.display = 'block';
    }
    document.write(x); //document.write(x) writes numbers 01234
    function SchovatFotku(div) {
      document.getElementById(div).style.display = 'none';
    }
  })();
}

<div id='velka-fotka1'>
  <div class="foto">
    <a href='#' onclick="SchovatFotku('velka-fotka1'); return false" title='Shut down'></a>
    <img src='bigmotopelech1.jpg' alt='click for display small picture' onclick="SchovatFotku('velka-fotka1'); return false" />
  </div>
</div>

<div class="foto">
  <a onclick="ZobrazFotku('bigmotopelech1.jpg');  return false" href='bigmotopelech1.jpg' title='display the big picture'><img src='motopelech1.jpg' width="320" height="240" alt="Pneumatika z motorky a deka"></a>
</div>

测试我的关闭我尝试添加 document.write(x) 但数字一起列出，而不是通过单击小图片一个接一个地列出，并且所有大图片都显示在一个单独的浏览器窗口中，更糟糕的是： http://mix.zlatberry.cz/obrazky2.html

所以我真的是束手无策了 :-( 。我从 9 月开始尝试解决它。​​
我将非常感谢帮助解决我的问题。我喜欢以这种方式修改我所有的网站，但我处于低迷状态...... 非常感谢提前 HTML：

<div id='big-photo1'>
<div class="foto">
<a href='#' onclick="HidePhoto('big-photo1'); return false" title='Hide'></a>
<img src='bigmotopelech1.jpg' alt='click for display a small photo' onclick="HidePhoto('big-photo1'); return false" />
</div>
</div>  

<div class="foto">
<a onclick="DisplayPhoto('bigmotopelech1.jpg');  return false" href='bigmotopelech1.jpg' title='display a big photo'><img src='motopelech1.jpg' width="320" height="240" alt="Pneumatika z motorky a deka"></a>
</div>  

Javascript：

let picture = new Array('big-photo1', 'big-photo2', 'big-photo3', 'big-photo4', 'big-photo5'); 

for (let i = 0; i < picture.length; i++)    { 
(function()  { 
let x = i;  
let photo = document.getElementById(picture[x]);         
function DisplayPhoto()  {                                  
photo.style.display = 'block'; 
                        }
function HidePhoto(div){  
    document.getElementById(div).style.display='none';
                      }                                                   
})();                          
  } 

这里是英文变量等的链接http://mix.zlatberry.cz/pict1.html

Answer 1

更改您的 ZobrazFotku 函数以接受包含 img 作为第一个参数的 div 的 id。这样你就完全不需要for 循环了。

function ZobrazFotku(id) {
  var div = document.getElementById(id);
  div.style.display = 'block';
}
function SchovatFotku(div) {
  document.getElementById(div).style.display = 'none';
}

JSFiddle 演示：http://jsfiddle.net/rkaqzx2v/