我讓用戶輸入一個特定的關鍵字,它將返回一個匹配該關鍵字(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。
這裏的任何幫助非常感謝!
它在哪兒應插入我建議你忘了使用
onclick
?你的html與2'class =「pic」'不一致。也沒有'