Question

我对jsonp有一个要求，一旦我们在文本框中输入标签名称，显示图像，它就很好。但是在图像，标题和相关标签之后将显示（每个图像后跟标题和标签）。这是我的代码。标签是动物，鸟，巴黎，牛......

$('#idSubmit').click(function(){  
  //$('#image-container').html(""); 
   $('img').remove();
   var txtVal = $('#idText').val(); 
    $.ajax({
            type:'GET',
            url:"http://api.flickr.com/services/feeds/photos_public.gne?tags="+txtVal,
            data:"&lang=en-us&format=json&jsoncallback=?",
            success:function(data) {            
                $.each(data.items, function(i, item) {                                  
                    var tagImgs = $("<img/>").attr("src", item.media.m).appendTo("#images");                                
                    var tagNames = item.tags;
                    var tagNames = tagNames.split(' ');                 
                    if (tagImgs){
                        $("<div/>").html(tagImgs).appendTo("body").attr('title',tagNames[0]).click(function(){
                          $(this).fadeOut(1000);
                        });         
                        if (i == 9) return false;
                    }                   
                });
            },
            dataType:'jsonp'                    
       });
  });

这是Fiddle

任何人都可以帮助我......

Answer 1

这就是你想要的吗？

$('#idSubmit').click(function(){  
  $('#image-container').html("");  
   var txtVal = $('#idText').val(); 
    $.ajax({
            type:'GET',
            url:"http://api.flickr.com/services/feeds/photos_public.gne?tags="+txtVal,
            data:"&lang=en-us&format=json&jsoncallback=?",
            success:function(data) {

                $.each(data.items, function(i, item) {      
                    if (item.media.m){
                        var blockItem = $("<div/>");

                        var blockImgs = $("<img/>").attr("src", item.media.m).appendTo( blockItem);
                        var blockTitle = $("<h3/>").html(item.title).appendTo( blockItem)
                        var blockTags = $("<p/>").html(item.tags).appendTo( blockItem)
                        $("#image-container").append( blockItem);

                        if (i == 9) return false;
                    }                   
                });
            },
            dataType:'jsonp'
       });
  });

这是Fiddle

如何显示每个图像后面的标题和相关标签

1 个答案: