javascript - 试图为简单的图片库找到更好的方法

Question

我有一个简单的画廊，可以隐藏和显示图像。它工作正常，但我对我的方法不满意。我的 javascript 似乎是多余的。你能检查我的代码并更好地了解我如何改进它吗？

这是我的html

<div class="big_img_wrapper">
                    <img src="<?= IMAGEPATH ?>front_page/phinfo/house_rentals/westgate/big_img_1.JPG" id="big_img_1" class="big_img">
                    <img src="<?= IMAGEPATH ?>front_page/phinfo/house_rentals/westgate/big_img_2.JPG" id="big_img_2" class="big_img">
                    <img src="<?= IMAGEPATH ?>front_page/phinfo/house_rentals/westgate/big_img_3.JPG" id="big_img_3" class="big_img">
                    <img src="<?= IMAGEPATH ?>front_page/phinfo/house_rentals/westgate/big_img_4.JPG" id="big_img_4" class="big_img">
                    <img src="<?= IMAGEPATH ?>front_page/phinfo/house_rentals/westgate/big_img_5.JPG" id="big_img_5" class="big_img">
                    <img src="<?= IMAGEPATH ?>front_page/phinfo/house_rentals/westgate/big_img_6.JPG" id="big_img_6" class="big_img">
                </div>
                <div class="thumbs_img_wrapper">
                    <img src="<?= IMAGEPATH ?>front_page/phinfo/house_rentals/westgate/thumbnails/thumbs_img_1.jpg" id="thumbs_img_1" calss="thumbs_img">
                    <img src="<?= IMAGEPATH ?>front_page/phinfo/house_rentals/westgate/thumbnails/thumbs_img_2.jpg" id="thumbs_img_2" calss="thumbs_img">
                    <img src="<?= IMAGEPATH ?>front_page/phinfo/house_rentals/westgate/thumbnails/thumbs_img_3.jpg" id="thumbs_img_3" calss="thumbs_img">
                    <img src="<?= IMAGEPATH ?>front_page/phinfo/house_rentals/westgate/thumbnails/thumbs_img_4.jpg" id="thumbs_img_4" calss="thumbs_img">
                    <img src="<?= IMAGEPATH ?>front_page/phinfo/house_rentals/westgate/thumbnails/thumbs_img_5.jpg" id="thumbs_img_5" calss="thumbs_img">
                    <img src="<?= IMAGEPATH ?>front_page/phinfo/house_rentals/westgate/thumbnails/thumbs_img_6.jpg" id="thumbs_img_6" calss="thumbs_img">
                </div>

这是我的CSS

.big_img_wrapper, .big_img_wrapper img{
            width: 370px;
            height: 246px;
            /*display: none;*/
        }
        .thumbs_img_wrapper{
            padding:0;
        }
        .thumbs_img_wrapper img{
            width: 111px;
            height: 70px;
            margin: 14px 0 0 14px;
        }
        #thumbs_img_1, #thumbs_img_4{
            margin: 14px 0 0 0;
        }

最后是我的 jquery

$(document).ready(function(){

    $('img.big_img').hide(); // Hides all big images
    $('img#big_img_1').fadeIn('slow'); // Serve as default image

    $('img#thumbs_img_1').click(function(){
        $('img.big_img').hide(); // Hides all big images
        $('img#big_img_1').fadeIn('slow'); //Slowly fades in selected image
    });

    $('img#thumbs_img_2').click(function(){
        $('img.big_img').hide(); // Hides all big images
        $('img#big_img_2').fadeIn('slow'); //Slowly fades in selected image
    });

    $('img#thumbs_img_3').click(function(){
        $('img.big_img').hide(); // Hides all big images
        $('img#big_img_3').fadeIn('slow'); //Slowly fades in selected image
    });
    $('img#thumbs_img_4').click(function(){
        $('img.big_img').hide(); // Hides all big images
        $('img#big_img_4').fadeIn('slow'); //Slowly fades in selected image
    });
    $('img#thumbs_img_5').click(function(){
        $('img.big_img').hide(); // Hides all big images
        $('img#big_img_5').fadeIn('slow'); //Slowly fades in selected image
    });
    $('img#thumbs_img_6').click(function(){
        $('img.big_img').hide(); // Hides all big images
        $('img#big_img_6').fadeIn('slow'); //Slowly fades in selected image
    });

});

我愿意使用插件来进行更好的改进。 谢谢!

Answer 1

您可以使用以下方法代替对每个缩略图使用 .click() 事件:

$('img.thumbs_img').click(function(){
        $('img.big_img').hide(); // Hides all big images
        var id = $(this).attr('id');
        id = id.replace("thumbs_img_", "big_img_");
        $('img#'+id).fadeIn('slow'); //Slowly fades in selected image
    });

仍然不确定那是否更好。