0

最初の画像のみが表示され、クリックすると残りのギャラリーがカラーボックス (ライトボックス プラグイン) で起動する Flickr スライドショーを API から作成しようとしています。

これが私のコードです：

var url = "http://api.flickr.com/services/rest/?method=flickr.photosets.getPhotos&api_key=f0b84fba1c00631410b85b90720f52ba&photoset_id=72157632271202012";
var classes = ['show', 'hide', 'hide', 'hide', 'hide', 'hide', 'hide', 'hide', 'hide', 'hide', 'hide', 'hide', 'hide', 'hide', 'hide', 'hide'];
var src;
    $.getJSON(url + "&format=json&jsoncallback=?", function (data) {
        $.each(data.photoset.photo, function (i, item) {
            src = "http://farm" + item.farm + ".static.flickr.com/" + item.server + "/" + item.id + "_" + item.secret + ".jpg";
            title = item.title;     

            $(document).ready(function () {
                $("<a>").attr({
                    "href": src,
                    "class": "gallery",
                    "title": title
                }).html(
                    $("<img />").attr({
                        "src": src,
                        "alt": title,
                "class": (classes[i]), //line in question
                        "width": "240",
                        "height": "180"
                    })

                ).appendTo("#thumb");


            });

        });


    });

    $(window).load(function () {
        $(".gallery").colorbox({
            rel: 'group1'
        });
    });

これはうまく機能しますが、最初の画像に「表示」クラスを追加し、残りの画像に「非表示」クラスを追加する方法は、長いクラス配列では非常に扱いにくいものです。また、flickr フォトセットが大きくなると、配列内の hide(s) が不足するため、これは機能しなくなります。

これを行うには、最初の画像が「表示」クラスを取得し、他のすべての画像が「非表示」クラスを取得するという if else ステートメントを含む、より良い方法が必要です。

ありがとう！

4

1 に答える 1

1

これを試して：

"class": (i===0 ? "show" : "hide"), //line in question

条件演算子 (? :三項演算子とも呼ばれます) は、質問で言及した if/else の動作を提供しますが、値が必要な場所に直接インライン化します。

実際には括弧は必要ないことに注意してください - 以下は問題ありません:

"class": i===0 ? "show" : "hide",

...しかし、私の目には、括弧を使用すると少し明確になります。

于 2013-06-23T02:08:58.723 に答える