jQuery问题显示图像（无法显示或很快消失）

我正在尝试制作一个简单的网站。我想显示图像的缩略图，然后用户可以单击缩略图以显示更大的图片。缩略图被赋予了一个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>

---

是的，我到处找了找，找不到关于这个问题的帮助。

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

用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>

还有一点jQuery

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

---

当其他人使用

.show（）

时，为什么领导者和密封件使用

.fadeIn（）

？好问题。我试着把一些东西改成fadeIn而不是show，看看它是否有用。我忘了在我把它贴到这里之前把它改回去了。我想我的主要问题是，为什么这段代码不适用于这两个图像，而它们对其他图像也适用？为什么一个不显示，而另一个显示，然后很快消失？这就是我不明白的。这很有趣，谢谢。我正在努力自己制作这个页面，所以我需要稍微研究一下以确保我理解。谢谢你的时间！但是你能找到我的不起作用的原因吗？我的意思是，我是否遗漏了一些东西，比如为什么他们中的两个不能工作，即使他们的代码看起来和其他代码一样？在为每一个jquery输入完所有的jquery之后，我意识到使用函数、变量或其他更好的方法来处理它。我只是不明白为什么我的不起作用。例如，你在类名

中遗漏了等号，除此之外，你的代码工作得很好，但写这样的代码有点过火。谢谢！嗯。还有，我仍然不知道为什么海狮图片会快速出现/消失，但我尝试了你的代码，它工作了！非常感谢你！我不想做600px乘以400px的，因为有些图片是垂直的，它会压缩它们。我还想把图片放在div的中心，所以我会努力的。非常感谢您的时间和帮助。不客气；）要使图像居中，请将gallery放入wrapper div并设置

text align:center到提到的分区。
(function($) {
  $('#thumbs img').click(function() {
    $('#big img[class="'+$(this).data('rel')+'"]').fadeIn(400, 'linear').siblings('img').fadeOut(400, 'linear');
  });
})(jQuery);