0

私はこのサイトは初めてで、jquery と javascript はまったく初めてですが、HTML と CSS についてはよく理解しています。学校のクラスで、Shadowbox プラグインを使用してフォト ギャラリー Web ページを作成しています。私はその部分をすべてダウンさせましたが、要件の 1 つは、ユーザーが変更できる、Cookie に保存される何らかのユーザー オプションを追加することです。(まだ Cookie の部分には行っていません) オプションとして、ページのビューを画像付きのグリッド ビュー (デフォルト) からキャプションのみのリスト ビューに切り替えるトグルを追加することにしました。画像。私はそれを行う方法を考え出しましたが、おそらくループを使用してもっと簡単な方法で行うことができると判断しました.

ここに私が持っているHTMLがあります:

  <body>
        <div id="preferences">
        <h1>My Photo Gallery</h1>
        <ul id="options">
            <li><a href="#" id="list"><img src="media/listview.png" alt="List view"/></a></li>
            <li><a href="#" id="grid"><img src="media/gridview.png" alt="List view"/></a></li>
        </ul>
        </div>

        <div id="gallery">
            <a rel="shadowbox[Gallery]" class="l1 img" href="media/img1.jpg" title="Black and White Leopard Pattern"><img src="media/thumb1.jpg" alt="Black and White Leopard Pattern"/></a>
            <a rel="shadowbox[Gallery]" class="l2 img" href="media/img2.jpg" title="Snow Leopard Pattern"><img src="media/thumb2.jpg" alt="Snow Leopard Pattern"/></a>
            <a rel="shadowbox[Gallery]" class="l3 img" href="media/img3.jpg" title="Colorful Triangle Pattern"><img src="media/thumb3.jpg" alt="Colurful Triangle Pattern"/></a>
            <a rel="shadowbox[Gallery]" class="l4 img" href="media/img4.jpg" title="Tie Dye Zebra Stripe Pattern"><img src="media/thumb4.jpg" alt="Tie Dye Zebra Stripe Pattern"/></a>
            <a rel="shadowbox[Gallery]" class="l5 img" href="media/img5.jpg" title="Blue Knitted Pattern"><img src="media/thumb5.jpg" alt="Blue Knitted Pattern"/></a>
            <a rel="shadowbox[Gallery]" class="l6 img" href="media/img6.jpg" title="Black and White Damask Pattern"><img src="media/thumb6.jpg" alt="Black and White Damask Pattern"/></a>
            <a rel="shadowbox[Gallery]" class="l7 img" href="media/img7.jpg" title="Wooden Panel Pattern"><img src="media/thumb7.jpg" alt="Wooden Panel Pattern"/></a>
            <a rel="shadowbox[Gallery]" class="l8 img" href="media/img8.jpg" title="Brick Pattern"><img src="media/thumb8.jpg" alt="Brick Pattern"/></a>
            <a rel="shadowbox[Gallery]" class="l9 img" href="media/img9.jpg" title="Watercolor Pattern"><img src="media/thumb9.jpg" alt="Watercolor Pattern"/></a>
            <a rel="shadowbox[Gallery]" class="l10 img" href="media/img10.jpg" title="Orange Stripe Pattern"><img src="media/thumb10.jpg" alt="Orange Stripe Pattern"/></a>
            <a rel="shadowbox[Gallery]" class="l11 img" href="media/img11.jpg" title="Blue Scales Pattern"><img src="media/thumb11.jpg" alt="Blue Scales Pattern"/></a>
            <a rel="shadowbox[Gallery]" class="l12 img" href="media/img12.jpg" title="Woven Pattern"><img src="media/thumb12.jpg" alt="Woven Pattern"/></a>
        </div>
    </body>

したがって、これは機能するサンプルです（リスト部分についてはとにかく）が、画像ごとに繰り返す必要があるため、コードに関しては過剰に思えます。

$(document).ready(function(){

    $( "#list" ).click(function() {
        $( "a.l1" ).removeClass( "img" );
        $( "a.l1" ).addClass( "lst" );
        $( "a.l1" ).text( $( "a.l1" ).attr( "title" );
      //repeat for l1 through l12 (that`s the letter L not a 1)
    });
    $( "#grid" ).click(function() {
        $( "a.l1" ).removeClass( "lst" );
        $( "a.l1" ).addClass( "grid" );
        //actually have no idea at all how to get this back to the original img tag other than maybe .innerHTML???
      //repeat for l1 through l12 (again, that`s the letter L not a 1)
    });
}):

そして、これが私が望む方法です（機能する方法を除いて、知っています）

$(document).ready(function(){
    var i = 1;
    var selcur = $( "'a.l" + i + "'" );
    var title = selcur.attr( "title" );
    var image = '<img src="media/thumb' + i + '.jpg" alt="' + title + '"/>';

    $( "#list" ).click(function() {
        while (1<=12) {
            selcur.addClass("lst");
            selcur.removeClass("img");
            selcur.text( title );
            i++;
        }
        i = 1;
    });

    $( "#grid" ).click(function() {
        while (1<=12) {
            selcur.removeClass("lst");
            selcur.addClass("img");
            selcur.text( image );
            i++;
        }
        i = 1;
    });
});

私がこれについてどのように間違っているのか教えてください。もう一度覚えておいてください。私はこれに慣れていません。これを行うより良い方法はありますか？私は本当にそれをシンプルに保ちたいと思っています。

4

1 に答える 1

0

連鎖 (JQuery が非常に便利な理由の 1 つ) と、属性を変更するためのループを使用して、コードを少し単純化しました。私はそれをテストしていませんが、それはあなたが望んでいることをするはずです.グリッドをクリックして戻ったときに画像を追加する前に、リンク内のテキストをクリアする必要があるかもしれません.

$(document).ready(function(){
    $("#list").click(function(){
        $("#gallery a").removeClass("img").addClass("lst").each(function(index,el){
            $(el).text($(el).attr("title"));
        });
    });
    $("#grid").click(function(){
        $("#gallery a").removeClass("lst").addClass("grid").each(function(index,el){
            $(el).html("<img src=\""+$(el).attr("href").replace("img","thumb")+"\" alt\""+$(el).attr("title")+"\"/>");
        });
    });
});
于 2013-11-05T03:14:08.057 に答える