0

すべてが1つの関数に収まるように、これを短縮するにはどうすればよいですか。作業中の画像ギャラリーがあります。クラスaの画像をクリックすると、クラスbigimgの画像が選択した画像に変更されます。私はおそらく画像を変更するために長い道のりを行ってきましたが、最大で12個しかありません。

ところで、私は私の画像をホストしますこれらは私のテスト

HTML/jQueryのためだけです

<div id="galleryholder">

            <div id="largeimg" class="center">
                <img class="bigimg" src="http://1.bp.blogspot.com/-BNkayp7vphQ/UEmx3WTwe1I/AAAAAAAAELg/eHu4hWtoXbk/s1600/desktop-wallpaper-29.jpg">
            </div>

            <div id="reel">
                <a href=""><img class="a" src="http://wallpaperstate.org/wp-content/gallery/ca_home/hd-wallpaper-30.jpg"></a>
                <a href="#"><img class="b" src="http://1.bp.blogspot.com/-BNkayp7vphQ/UEmx3WTwe1I/AAAAAAAAELg/eHu4hWtoXbk/s1600/desktop-wallpaper-29.jpg"></a>
                <a href="#"><img class="c" src="http://1.bp.blogspot.com/-BNkayp7vphQ/UEmx3WTwe1I/AAAAAAAAELg/eHu4hWtoXbk/s1600/desktop-wallpaper-29.jpg"></a>
            </div>

                <script>
                $(function() {

                  $('.a').click(function(){
                    $(".bigimg").attr('src',"http://wallpaperstate.org/wp-content/gallery/ca_home/hd-wallpaper-30.jpg");
                    return false;
                  });
                });


                $(function() {
                  $('.b').click(function(){
                    $(".bigimg").attr('src',"http://1.bp.blogspot.com/-BNkayp7vphQ/UEmx3WTwe1I/AAAAAAAAELg/eHu4hWtoXbk/s1600/desktop-wallpaper-29.jpg");
                    return false;
                  });
                });
                </script>

        </div>
4

2 に答える 2

8

srcクリックした画像から動的にプルします。

var $big = $(".bigimg");

$('#reel img').click(function () {
    $big.attr('src', this.src);
    return false;
});
于 2013-01-25T18:32:34.727 に答える
0 

        <div id="largeimg" class="center">
            <img class="bigimg" src="http://1.bp.blogspot.com/-BNkayp7vphQ/UEmx3WTwe1I/AAAAAAAAELg/eHu4hWtoXbk/s1600/desktop-wallpaper-29.jpg">
        </div>

        <div id="reel">
            <a href=""><img class="a" src="http://wallpaperstate.org/wp-content/gallery/ca_home/hd-wallpaper-30.jpg"></a>
            <a href="#"><img class="a" src="http://1.bp.blogspot.com/-BNkayp7vphQ/UEmx3WTwe1I/AAAAAAAAELg/eHu4hWtoXbk/s1600/desktop-wallpaper-29.jpg"></a>
            <a href="#"><img class="a" src="http://1.bp.blogspot.com/-BNkayp7vphQ/UEmx3WTwe1I/AAAAAAAAELg/eHu4hWtoXbk/s1600/desktop-wallpaper-29.jpg"></a>
        </div>

            <script>
            $(function() {
              $('.a').click(function(e){
                $(".bigimg").attr('src',$(this).attr('src'));
                e.preventDefault();
              });
            });
            </script>
于 2013-01-25T18:34:14.443 に答える