как обобщить функцию щелчка в jquery

Question

У меня 13 маленьких картинок и 13 больших картинок, если щелкнуть любую из маленьких картинок, она покажет соответствующую большую картинку, мне было просто интересно, можно ли обобщить функцию щелчка, чтобы мне не пришлось повторить код дамы 13 раз, спасибо

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

поэтому мне было интересно, могу ли я изменить $ ("# s1"). Click (function (), чтобы мне не пришлось повторять это 13 раз.

спасибо

Answer 1

Вот как бы я это сделал:

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

Обратите внимание, что я использую "rel" для связи элементов. Я считаю, что это чище, чем предполагать, что b1 относится к s1. Мне нравится CoC , но я не уверен, что в этом случае это будет лучшая идея.

Answer 2

Должно работать следующее:

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

Answer 3

Попробуйте это

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

Answer 4

Самый гибкий вариант - использовать index и eq и избавиться от всех явных html-помощников, таких как ID или rel

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

Answer 5

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

});

Answer 6

Поместите класс в каждое изображение. например:

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

А потом:

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

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

РЕДАКТИРОВАТЬ: тогда, конечно, вы должны изменить строку $ ('# b1'). Show (); но это легко, вам просто нужно получить идентификатор элемента и построить идентификатор большего изображения. Так же, как Джастин Джонсон в своем ответе.