how to generalize a click function in jquery

I have 13 small pictures and 13 big pictures,if any of the small pictures are clicked it'll show the related big picture, I was just wondering if it was possible to generalize the click function so I don't have to repeat the dame code 13 times, thanks

<div id="press_images">

                <img id="s1" class="small" src="images/press/small/1.png" />
                <img id="s2" class="small" src="images/press/small/2.png" />
                <img id="s3" class="small" src="images/press/small/3.png" />
                <i开发者_JS百科mg id="s4" class="small" src="images/press/small/4.png" />

                .....
                <img id="s13" class="small" src="images/press/small/13.png" />
</div>

<div class="big">     
               <a id="close">X</a>
               <img id="b1" src="images/press/big/1.jpg" />
               ......
               <img id="b13" src="images/press/big/13.jpg" />
</div>


$("#s1").click(function(){  

  $('#b1').show();
  $('.big').show(300);
      return false;  
   }); 

so I was wondering if I could change the $("#s1").click(function() so I don't have to repeat it 13 times.

thanks

The following should work :

$(".small").click(function(){  
      var id_img=$(this).attr('id').replace('s','');
      $('.big img').hide();
      $('#b'+id_img).show();
      $('.big').show(300);
      return false;  
});

Try this

// For all <img>'s with class `small`
$("img.small").click(function() {
    // Get the index from the small image's ID
    var index = this.id.substr(1);
    // Hide all other big images
    $(".big img").hide()
    // Show the related big images
    $('#b' + index).show();
    // Show the big image container
    $('.big').show(300);

    return false;
});

That's how I'd do it:

<div id="press_images">
      <img id="s1" rel="b1" class="small" src="images/press/small/1.png" />
      <img id="s2" rel="b2" class="small" src="images/press/small/2.png" />
</div>

<div class="big">     
      <a id="close">X</a>
      <img id="b1" class="big" src="images/press/big/1.jpg" />
      <img id="b2" class="big" src="images/press/big/2.jpg" />
</div>


$(".small").click(function(){  
  $( ".big img" ).hide();
  $( "#"+ $(this).attr("rel") ).show();
}

Notice that I use "rel" to link the elements. I consider it to be cleaner than assuming that b1 is related to s1. I like CoC, but I'm not sure that in that case it'd be the best idea.

<div id="press_images">

                <img id="small1" class="small small-img"  src="images/press/small/1.png" />
                <img id="small2" class="small small-img" src="images/press/small/2.png" />
                <img id="small3" class="small small-img" src="images/press/small/3.png" />
                <img id="small4" class="small small-img" src="images/press/small/4.png" />

                .....
                <img id="small13" class="small small-img" src="images/press/small/13.png" />
</div>

<div class="big">     
               <a id="close">X</a>
               <img id="big1" class="big-img" src="images/press/big/1.jpg" />
               ......
               <img id="big13" class="big-img" src="images/press/big/13.jpg" />
</div>


$(".small-img").click(function(e){ 

  var imgBig = String($(this).attr("id")).replace("small", "big");

  e.stopPropagation();
  $(".big-img").hide();
  $("#" + imgBig ).show();
  $(".big").show(300);

});

Put a class in every image. for example:

<img id="s1" class="small clickable-image" src="images/press/small/1.png" />

And then:

$(".clickable-image").click(function(){  

  $('#b1').show();
  $('.big').show(300);
  return false;  
});

EDIT: then of course, you have to change the line $('#b1').show(); but, it's easy, you just have to get the element ID and build the ID of the bigger image. Just like Justin Johnson does in his answer.

The most flexible option is to use index and eq and get rid of all explicit html helpers, like ID or rel

$('#press_images img').click(function() {
    var n = $('#press_images img').index(this);
    $(".big img").hide().eq(n).show()
});