0

我正在尝试从 API 创建一个 Flickr 幻灯片，其中仅显示第一张图像，当单击它时，它会在颜色框（灯箱插件）中启动画廊的其余部分。

这是我的代码：

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 照片集的增长，这将不再起作用，因为它用完了数组中的隐藏。

必须有一个更好的方法来做到这一点，它可能涉及一个 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 回答