Question

我正面临着jQuery的问题。我试图建立一个画廊，我有这个代码：

HTML

<div id="gallery">
    <img src="img/1.jpg" alt="image" id="img">
</div>

<div id="thumbnails">
    <img src="img/thumb1.jpg" alt="thumbnail" id="thumb1">
    <img src="img/thumb2.jpg" alt="thumbnail" id="thumb2">
    <img src="img/thumb3.jpg" alt="thumbnail" id="thumb3">
    <img src="img/thumb4.jpg" alt="thumbnail" id="thumb4">
</div>

的jQuery

   $(document).ready(function(){
        $('#thumb1').click(function(){
           $('#img').attr("src","img/1.jpg");
        });
        $('#thumb2').click(function(){
           $('#img').attr("src","img/2.jpg");
        });
        $('#thumb3').click(function(){
           $('#img').attr("src","img/3.jpg");
        });
        $('#thumb4').click(function(){
           $('#img').attr("src","img/4.jpg");
        });
    });

效果很好，但是，如果我有4张以上的图片，那就说... 40张图片，那就是很多代码。我想知道如果没有编写所有代码就可以做到这一点......

Answer 1

拥有class而不是id。如果您的所有图片都将按照问题编号，则可以使用data-id属性来包含该值。像这样的东西

<div id="thumbnails">
    <img src="img/thumb1.jpg" alt="thumbnail" id="thumb1" class="thumb" data-id="1">
    <img src="img/thumb2.jpg" alt="thumbnail" id="thumb2" class="thumb" data-id="2">
    <img src="img/thumb3.jpg" alt="thumbnail" id="thumb3" class="thumb" data-id="3">
    <img src="img/thumb4.jpg" alt="thumbnail" id="thumb4" class="thumb" data-id="4">
</div>

$('.thumb').on('click', function(){
  $(this).attr('src', 'img/' + $(this).attr('data-id') + '.jpg');
});

正如T.J.Crowder先生在下面的评论中所说，实施取决于你。将值存储在data-id或只使用id。但最后对所有图像使用class，这样您只能连接一次点击事件而不是多次。

Answer 2

您可以将另一个带位置的属性添加到大图像中，例如

<div id="thumbnails">
    <img src="img/thumb1.jpg" data-big="img/1.jpg" alt="thumbnail" id="thumb1">
    <img src="img/thumb2.jpg" data-big="img/2.jpg" alt="thumbnail" id="thumb2">
    <img src="img/thumb3.jpg"  data-big="img/3.jpg" alt="thumbnail" id="thumb3">
    <img src="img/thumb4.jpg"  data-big="img/4.jpg" alt="thumbnail" id="thumb4">
</div>

然后使用jQuery

$('#thumbnails img').click(function(){ 
     $('#gallery img:first').attr('src',$(this).attr('data-big')); 
});

有没有办法使用数字数组来减少代码量

2 个答案: