jQuery：显示/隐藏Div损坏

Question

Scenario: I'm trying to create a script that allows a user to click a thumbnail image and display a larger image in preview box. I'm using a div and a img for this example just as a placeholder for now.

Question In Jquery, is there a way to use a function with parameters as a callback for a onclick event listener? I've looked at addEventListener and Onclick and .on method in jquery, but nothing seems to fit what i'm searching for.

My Attempts:

1. http://jsfiddle.net/davideugenepeterson/9emhuzw0/3/

2. 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

I don't understand what you're trying to do with an array. Give the image something relating to a corresponding element you want to be shown (I used data attribute in example). And give a collective class name to all the elements that are going to be shown/hidden.

Then on click, hide all and show the one related to what was clicked.

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

See fiddle: fiddle

Answer 2

Another solution (four variations)

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>

Working jsBin

d) jQuery version

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

Working jsBin