Question

所以我正在研究一个项目，该项目基本上将用户的输入作为闪烁的“标记”并存储它，然后重新使用它来创建它从标记中拉出的闪烁图像的图库。现在我想我已经完成了我正在尝试做的事情......但它只是不能100％工作......或者根本没有，因为没有任何图像出现了，但这是我的代码

<head>
    <meta charset="utf-8" />
    <title>Image Gallery</title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <script src="js/index.js"></script>

    <script>
        $(function() {

            $("#test").keyup(function(){
                var value = $(this).val()

                $.getJSON(
                    "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
                    {
                        tags: "value",
                        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;
                        });
                    }
                );
            };
        });
    </script>

</head>
<body>
    <form>
        Input a Tag for Flicker Images: <input id="test" type="text" />
    </form>

    <div id="images"></div>

</body>

看起来这很简单，但我无法弄清楚我做错了什么..

Answer 1

你错过了一个半冒号：

var value = $(this).val()

应该是：

var value = $(this).val();

我还会在type="text/javascript"代码

上添加<script>属性

另一件事，结束标签（最后两个）是：

};
});

应该是

});仅

这是返工：

$(function() {
    $("#test").keyup(function() {
        var value = $(this).val();
        $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?", {
            tags: "value",
            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;
            });
        });
    });
});

这是一个有效的例子：http://jsfiddle.net/MarkSchultheiss/NFRsX/

Answer 2

删除值周围的双引号; 制作tags:"value" as tags:value
还检查括号错误。你的代码运行得很好..我使它工作..

Answer 3

我整理了一些你的代码，可以让以下工作：

$(function() {

  var url = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
      timer;

  var handle = function(data) {
                $.each(data.items, function(i,item){
                    $("<img/>").attr("src", item.media.m).appendTo("#images");
                    if ( i == 20 ) return false;
                });
              };

  var params = { tagmode: "any",
                 format: "json" };


  $("#test").keyup(function(){
    params['tags'] = $(this).val();
    window.clearTimeout(timer);
    timer = window.setTimeout(function(){        
      $.getJSON(url, params, handle);
    }, 500);
  });
});

我将$ .getJson作为回调传递给setTimeout，所以你不会在每次按键时都点击flickr。

Answer 4

在客户端使用flickr api需要jsonp。请查看问题https://stackoverflow.com/a/5945676/24047

Jquery / Javascript Flickr Gallery ..非常需要帮助

4 个答案: