Question

我正在研究检索我的Flickr专辑照片，然后逐个图像添加属性。我通过使用此代码获取所有元素成功了。基本上，它会逐一添加一个类“img”的部分到专辑图片。

我想动画下一个“img”元素（我用不透明度测试），但生成的代码似乎适用于一个巨大的“img”属性（这是合乎逻辑的，因为在flickr img加载之前DOM元素是空的

这里要清除的是以前的HTML：

<div id="img">
    <!-- Picture container goes here -->
    <section class="img">
        <!-- Img container goes here - 1 item created one section -->
    </section>
</div>

然后我用这个JS / Jquery检索我的Flickr元素（也许是答案会在那里）

<script>
    $(document).ready()
    var apiKey = '216ef208ff620b0dfa1700e505fba309';
    var galeryno = '72157635214178998';
    $(function (flickr) {
        $.getJSON('http://api.flickr.com/services/rest/?&method=flickr.photosets.getPhotos&api_key=' + apiKey + '&photoset_id=' + galeryno + '&format=json&jsoncallback=?',

        function (data) {
            $.each(data.photoset.photo, function (i, item) {
                var photoFull = 'http://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_b.jpg';
                var photoURL = 'http://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_t.jpg';
                var photoID = item.id;
                //use another ajax request to get the tags of the image
                $.getJSON('http://api.flickr.com/services/rest/?&method=flickr.photos.getInfo&api_key=' + apiKey + '&photo_id=' + photoID + '&format=json&jsoncallback=?',

                function (data) {
                    if (data.photo.tags.tag != '') {
                        var tagsArr = new Array();
                        $.each(data.photo.tags.tag, function (j, item) {
                            tagsArr.push('<a href="http://www.flickr.com/photos/tags/' + item._content + '">' + item.raw + '</a>');
                        });
                        var tags = tagsArr.join(', ');
                    }

                    //imgCont is important i guess - maybe it's not creating the best kind of DOM element to work laterby

                    var imgCont = '<section class="img"><a href=' + photoFull + ' data-lightbox="Chaton"title=' + data.photo.title._content + '><img class="" src=' + photoFull + ' alt=""</a></section>'

                    if (data.photo.description._content != '') {

                        imgCont += '<p><span class="infoTitle">Description:</span> ' + data.photo.description._content + '</p></div></div>';
                    }
                    $(imgCont).appendTo('#img');
                });
            });
        });
    });
</script>

最后，对于所有新的“img”元素，问题是我想逐个创建图像上的事件。我尝试使用Jquery API中的代码来检查触发器后点击“next img”是否会消失。它没有用，因为所有的元素都没有区别，所以我的图片一下子全部消失了：

    $(document).ready(function () {

        $(".top").click(function () {
            $(".img").next().animate({
                opacity: 0.25,
                left: "+=50",
                height: "toggle"
            }, 5000, function () {});
        });
    });

感谢您阅读这篇文章。我希望自己足够清楚。

PS：抱歉小猫

我做了一个小提琴，因为它更容易调试：http://jsfiddle.net/AYV7d/

Answer 1

好吧，分配一个id会有所帮助......我为你分道扬琴：

http://jsfiddle.net/3yFsP/1/

只需在加载函数中添加一个计数器

var imgCont = '<section id="img_'+(counter++)+'" class="img">[...]</section>';

然后你可以使用第二个计数器迭代它：

$( ".top" ).click(function() {
    $("#img_"+counter2++).animate({
        opacity:0.25,
        left: "+=50",
        height: "toggle"
    },5000);
});

....但是哇....代码真是难以辨认，你应该重做缩进...还有，你缺少一些半音......

...可爱的kiten btw，让工作变得更容易：D

Answer 2

您可以使用jQuery选择第一个非动画元素，如下所示：

$(document).ready(function () {

    $(".top").click(function () {
        $(".img")
            .not('.animated')
            .first()
            .addClass('animated')
            .animate({
                opacity: 0.25,
                left: "+=50",
                height: "toggle"
            }, 5000, function () {});
    });
});

您需要将“动画”类添加到原始HTML中，以便忽略第一部分：

<div id="img">
    <!-- Picture container goes here -->
    <section class="img animated">
        <!-- Img container goes here - 1 item created one section -->
    </section>
</div>

这是一个jsFiddle：http://jsfiddle.net/LbMMZ/

动画下一个图像元素（由Jquery生成）

2 个答案: