从Flickr Feed链接Jquery中的图像

时间:2012-02-09 21:21:24

标签: javascript jquery html flickr

我正在尝试将flikr Feed中的图片链接起来。我一直在遇到Javascript相当新的问题。我花了一段时间才得到这个(尽管flikr提供了feed的基本代码)我之所以这样做是因为它允许你使用.split()函数输入多个标签。我知道这可以用HTML字符串来完成.....但我知道必须有一个更简单快捷的方法,即使我甚至无法用它来解决它们...如果你也请随意改进我的代码,我试图尽量缩短它。

$(function() {
        new WebApp(); 
        function WebApp() {



            this.form = $("<form><input id='tags' placeholder='tags'><input type='submit' value='submit'></form>").appendTo("header");


            this.form.submit(function (){ 
                $("#images").empty();
                var splitTest = $("#tags").val(); 
                //alert(splitTest);
                var arr = splitTest.split(",");
                //alert(arr.length);

                for(var i = 0; i <= arr.length; i++){
                    $.getJSON(
                        "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
                    {
                        tags: arr[i],
                        tagmode: "any",
                        format: "json"
                    },
                        function(data) {
                            $.each(data.items, function(i,item){
                                $("<img/>").attr("src", item.media.m).appendTo("#images");
                                if ( i == 20 ) return false;
                            });
                        }
                    );
                }

                return false; 
            }); 
        }

1 个答案:

答案 0 :(得分:0)

您可以像这样改进代码。看起来您在代码中的任何其他地方都不需要WebApp然后使用匿名函数并在页面加载时执行它。

$(function(){
    $("<form><input id='tags' placeholder='tags'><input type='submit' value='submit'></form>")
    .appendTo("header");
    .submit(function (){ 
        $("#images").empty();
        var arr = $("#tags").val().split(",");
        for(var i = 0; i <= arr.length; i++){
          $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
            {
               tags: arr[i],
               tagmode: "any",
               format: "json"
             },
             function(data) {
                 $.each(data.items, function(i,item){
                    $("<img/>").attr("src", item.media.m).appendTo("#images");
                    return  !( i == 20 );
                 });
            });
        }
        return false; 
    }); 
});