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

将id替换为HTML5 data属性

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

jQuery问题显示图像（赢得显示或快速消失）

1 个答案: