Question

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

问题在Jquery中，有没有办法使用带参数的函数作为onclick事件监听器的回调？我在jquery中查看了addEventListener和Onclick以及.on方法，但似乎没有什么能适合我正在搜索的内容。

我的尝试：

http://jsfiddle.net/davideugenepeterson/9emhuzw0/3/
http://jsfiddle.net/EhtrR/931/

Javascript：

var numberOfImages = 4;
var imageArray = [];

//since i'm going to hide all other divs each time a img is clicked,
// I need to be calling from imageArray[] so I can difArray check later
for (i = 0; i <= numberOfImages; i++) {
    //counting starts from zero, but frontend already built their naming convention to start with 1
    if (i === 0) {
        continue
    }
    imageArray.push(i);
}

for (i = 0; i <= imageArray.length; i++) {
    if (i === 0) {
        continue
    }  
    //on each img click show corresponding div and hide all others, not working
    $("#img-" + imageArray[i]).on('click', function () {
        $("#div-" + i).show();
    });
}

Answer 1

我不明白你在尝试用数组做什么。为图像提供与要显示的相应元素相关的内容（我在示例中使用了数据属性）。并为将要显示/隐藏的所有元素提供集体类名称。

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

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

请参阅小提琴：fiddle

Answer 2

另一种解决方案（四种变化）

A）

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

b）中

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

c）中

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>

工作jsBin

d）jQuery版本

(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 + ')');
    });
  });
})();

工作jsBin

Jquery：显示/隐藏Div破碎

2 个答案: