Question

我正在尝试从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'
        });
    });

这很好用，除了我将“show”类添加到第一个图像并“隐藏”到其余部分的方式对于长类数组非常笨重。此外，随着flickr photoset的增长，这将不再起作用，因为它耗尽了数组中的hide。

必须有一个更好的方法来做到这一点，可能涉及if else语句，只是说第一个图像得到“show”类，所有其他人得到“隐藏”类。

谢谢！

Answer 1

试试这个：

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

conditional operator ? :（也称为三元运算符）为您提供问题中提到的if / else行为，但直接在需要值的位置内联。

请注意，您实际上并不需要括号 - 以下情况很好：

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

......但是在我看来，用括号会更清楚。

jQuery .each循环 - 第一个元素与其他所有元素都有不同的类

1 个答案: