jQuery显示图像的问题(不会显示或快速消失)

Question

我正在尝试制作一个简单的网站。我想显示图像的缩略图，然后用户可以点击缩略图来显示更大的图片。缩略图被赋予了一个id，较大的图片被赋予了同一个名称的类。他们中的大多数人都在工作，除了两个（领导和印章）。起初，只是领导人没有出现，封印会出现，然后很快消失。考虑到所有的代码看起来都一样，而且是的，所有的图像名称都是正确的，我无法理解这一点。我的jQuery:

$("#beach").click(function() {
    $("#big img").hide();
    $(".beach").show("slow");
});
$("#cherry").click(function() {
    $("#big img").hide();
    $(".cherry").show("slow");
});
$("#coit").click(function() {
    $("#big img").hide();
    $(".coit").show("slow");
});
$("#dmz").click(function() {
    $("#big img").hide();
    $(".dmz").show("slow");
});
$("#leaders").click(function() {
    $("#big img").hide();
    $(".leaders").show("slow");
});
$("#nkcoast").click(function() {
    $("#big img").hide();
    $(".nkcoast").show("slow");
});
$("#nkhike").click(function() {
    $("#big img").hide();
    $(".nkhike").show("slow");
});
$("#san").click(function() {
    $("#big img").hide();
    $(".san").show("slow");
});
$("#sealions").click(function(){
    $("#big img").hide();
    $(".sealions").show("slow");
});
$("#mail").click(function(){
    $("#big img").hide();
    $(".mail").show("slow");
});
$("#towers").click(function() {
    $("#big img").hide();
    $(".towers").show("slow");
});

我的HTML:

<div id="thumbs">
<img src="images/beachthumb.jpg" id="beach">
<img src="images/cherryblossomthumb.jpg" id= "cherry">
<img src="images/coittowerthumb.png" id="coit">
<img src="images/dmzthumb.jpg" id="dmz">
<img src="images/leadersthumb.jpg" id="leaders">
    <img src="images/nkcoastthumb.jpg" id="nkcoast">
<img src="images/nkhikethumb.jpg" id="nkhike">
<img src="images/sanvicentethumb.jpg" id="san">
<img src="images/sealionsthumb.png" id="sealions">
<img src="images/tokyomailthumb.jpg" id="mail">
<img src="images/towersthumb.jpg" id="towers">
</div>
<div id="big">
<img src="images/nkhike.jpg" class="nkhike">
<img src="images/tokyomail.jpg" class="mail">
<img src="images/sanvicente.jpg" class="san">
<img src="images/beach.jpg" class="beach">
<img src="images/nkcoast.jpg" class="nkcoast">
<img src="images/leaders.jpg" class"leaders">
<img src="images/towers.jpg" class="towers">
<img src="images/dmz.jpg" class="dmz">
<img src="images/sealions.png" class="sealions">
<img src="images/coittower.png" class="coit">
<img src="images/cherryblossom.jpg" class="cherry">
</div>

是的，我环顾四周，找不到这个问题的帮助。

Answer 1

这里有一个更简单的解决方案，FIDDLE

用HTML5 data属性替换id

<div id="thumbs">
  <img src="images/beachthumb.jpg" data-rel="beach">
  <img src="images/cherryblossomthumb.jpg" data-rel="cherry">
  <img src="images/coittowerthumb.png" data-rel="coit">
  <img src="images/dmzthumb.jpg" data-rel="dmz">
  <img src="images/leadersthumb.jpg" data-rel="leaders">
  <img src="images/nkcoastthumb.jpg" data-rel="nkcoast">
  <img src="images/nkhikethumb.jpg" data-rel="nkhike">
  <img src="images/sanvicentethumb.jpg" data-rel="san">
  <img src="images/sealionsthumb.png" data-rel="sealions">
  <img src="images/tokyomailthumb.jpg" data-rel="mail">
  <img src="images/towersthumb.jpg" data-rel="towers">
</div>
<div id="big">
  <img src="images/nkhike.jpg" class="nkhike" alt="Nkhike">
  <img src="images/tokyomail.jpg" class="mail" alt="Mail">
  <img src="images/sanvicente.jpg" class="san" alt="San">
  <img src="images/beach.jpg" class="beach" alt="Beach">
  <img src="images/nkcoast.jpg" class="nkcoast" alt="Nkcoast">
  <img src="images/leaders.jpg" class="leaders" alt="Leaders">
  <img src="images/towers.jpg" class="towers" alt="Towers">
  <img src="images/dmz.jpg" class="dmz" alt="Dmz">
  <img src="images/sealions.png" class="sealions" alt="Sealions">
  <img src="images/coittower.png" class="coit" alt="Coit">
  <img src="images/cherryblossom.jpg" class="cherry" alt="Cherry">
</div>

演示型

#big img {
  position: absolute;
  display: none;
  width: 600px;
  height: 400px;
}
#big img:first-child {
  display: block;
}

和一点点jQuery

(function($) {
  $('#thumbs img').click(function() {
    $('#big img[class="'+$(this).data('rel')+'"]').fadeIn(400, 'linear').siblings('img').fadeOut(400, 'linear');
  });
})(jQuery);