2015-11-02 29 views
1

我讓用戶輸入一個特定的關鍵字,它將返回一個匹配該關鍵字(Instagram API)的圖像。當用戶在文本區域輸入關鍵字並按下提交按鈕時,我希望提取的圖像被放置在與所使用的文本區域相同的div內。如何使用jQuery將變量(圖片標籤)追加到當前所在的當前div中?

這裏是我的兩個div:

<div id="firstPic" class="pic"> 
    <form id="form" onsubmit="return false;"> 
     <input type="text" id="input" placeholder="FAVORTIE ANIMAL"/> 
     <input type="submit" onclick="instaSearch();"/> 
    </form> 
</div> 
<div id="secondPic" class="pic"></div> 
<form id="form" onsubmit="return false;"> 
    <input type="text" id="input" placeholder="FAVORITE INSECT"/> 
    <input type="submit" onclick="instaSearch();"/> 
</form> 

這裏被調用的函數:

function instaSearch() { 
    //user input 
    var tagname = document.getElementById("input").value; 

    $.ajax({ 
    url: 'https://api.instagram.com/v1/tags/'+tagname+'/media/recent?client_id=YOUR-CLIENT-ID&callback=YOUR-CALLBACK', 
    dataType: 'jsonp', 
    success: function(result){ 
     for (var i = 0; i < 1; i++){ 
     var url = result.data[i].images.thumbnail.url; 
     var instapic = '<img src="' + url + '"/>'; 
      $(this).append(instapic); 
     } 
    } 
    }); 
} 

一切似乎正常工作,直到$(本).append(instapic);。理想情況下,我想附加instapic到這個div。

這裏的任何幫助非常感謝!

+0

它在哪兒應插入我建議你忘了使用onclick?你的html與2'class =「pic」'不一致。也沒有'