Javascript Jquery:Show/Hide Div已断开

场景：我正在尝试创建一个脚本，允许用户单击缩略图并在预览框中显示较大的图像。我在这个例子中使用了一个div和一个img作为占位符

在Jquery中，有没有一种方法可以使用带有参数的函数作为onclick事件监听器的回调？我已经研究了jquery中的addEventListener和Onclick以及.on方法，但似乎没有什么适合我所搜索的

我的尝试：

Javascript:

---

我不明白你想用数组做什么。给图像一些与您想要显示的对应元素相关的内容，我在示例中使用了数据属性。 并为将要显示/隐藏的所有元素指定一个集合类名

然后单击，隐藏所有内容并显示与单击内容相关的内容

$('img').click(function(){
    $('.somename').hide();
    $('#div-'+$(this).data("number")).show();
});

---

参见fiddle:

另一种解决方案四种变体

a

---

工作

如果必须通过HTML为每个图像提供数字值，我不会太激动。如果我们正在处理100多张图片呢？我刚刚添加了第二个坏例子。我尝试使用图像数组来转换差异，而不是使用jquery。我查看了您的代码，我认为您的方法有点复杂。您可能有数百个图像，但不需要制作额外的数组；此外，您不必仅为此任务使用jQuery。我这么说是因为你在最初的问题中提出了这个问题。另一方面，您可以在动态中构建DIV元素，当然，要记住其中的内容。如果你愿意，我可以添加这个解决方案。哦，我看到你又编辑了这个问题；如果我知道你需要一个图像库，我已经完成了：首先检查这个答案，如果你觉得它有用，我可以进一步修改它，使用DIV而不是弹出窗口。你知道Jquery中有没有一种方法可以做到这一点，而不必使用数据编号吗？类似于@hex4949-answer？检查下面更新的答案，我也添加了jQuery版本如果它在将来对任何人都有帮助，下面是我根据@hex4949-answer使用的结果：代码不工作？“这几乎正是我要找的东西。”大卫·彼得森不确定什么东西不起作用。以上所有代码都可以正常工作。或者我遗漏了什么。不，是我的浏览器太差劲了，你的代码工作得很好。非常感谢。

$('img').click(function(){
    $('.somename').hide();
    $('#div-'+$(this).data("number")).show();
});

// JavaScript
var img = document.getElementsByTagName('IMG'),
    div= document.getElementsByTagName('DIV'), 
    current, i;

for(i = 0; i < img.length; i++){
  (function(i){ 
    img[i].onclick = function(){
      div[i].style.display = 'block';
      if(current) current.style.display = 'none';
      current = div[i]; 
    };
  })(i);
}

var img = document.getElementsByTagName('IMG'),
    div= document.getElementsByTagName('DIV'), 
    current, i;

for(i = 0; i < img.length; i++){
    (function(i){
      img[i].onclick = function() { callback(i); };
    })(i); 
}

function callback(i){
  div[i].style.display = 'block';
  if(current) current.style.display = 'none';
  current = div[i];   
}

var img = document.getElementsByTagName('IMG'),
    div= document.getElementsByTagName('DIV'), 
    current, i;

for(i = 0; i < img.length; i++){
      img[i].onclick = callback.call(this,i);
}

function callback(i){
  return function () {
    div[i].style.display = 'block';
    if(current) current.style.display = 'none';
    current = div[i];   
  };  
}

<!-- HTML -->

<style>
  div {display:none;}
</style>

<img src="01.jpg" alt="" />
<img src="02.jpg" alt="" />
<img src="03.jpg" alt="" />
<img src="04.jpg" alt="" />
<img src="05.jpg" alt="" />

<div>first</div>
<div>second</div>
<div>third</div>
<div>fourth</div>    
<div>fifth</div>

(function(){
  var div = $('div'), current;
  $('img').each(function(index){
    $(this).bind ('click', function(){
      $('div:nth(' + index + ')').show();
      if(current) current.hide();
      current = $('div:nth(' + index + ')');
    });
  });
})();