我如何使用 jQuery 将变量（图像标签）附加到我当前所在的当前 div？

Question

我让用户输入特定关键字，这将 return 与该关键字匹配的图像 (Instagram API)。当用户在文本区域中输入关键字并按下提交按钮时，我希望将获取的图像放置在与使用的文本区域相同的 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);
      }
    }
  });
}

在 $(this).append(instapic); 之前一切似乎都正常工作。理想情况下，我想将 instapic 附加到 THIS div.

非常感谢这里的任何帮助！！

Answer 1

您不能在一个页面中多次使用相同的 ID，因此您需要改为使用类。我建议你忘记使用 onclick 因为你已经在使用 jQuery

<div id="firstPic" class="pic">
    <form class="pic_form" >
        <input type="text" class="search_input" placeholder="FAVORTIE ANIMAL">
        <input type="submit" value="Submit">
    </form>
</div>

JS

// document ready function
$(function () {
    // use submit handler instead of button to allow keyboard submit
    $('form.pic_form').on('submit', function (e) {
        e.preventDefault();
        // `this` is the form that was submitted
        var tagname = $(this).find('.search_input').val();
        var $container = $(this).parent();
        var url = 'https://api.instagram.com/v1/tags/' + tagname + '/media/recent?client_id=YOUR-CLIENT-ID&callback=?'
        // $.getJSON is shortcut method for `$.ajax`
        $.getJSON(url, function (result) {
            $.each(result.data, function (_, item) {
                var url = item.images.thumbnail.url;
                var instapic = '<img src="' + url + '">';
                $container.append(instapic);
            });
        });
    });

});

我如何使用 jQuery 将变量（图像标签）附加到我当前所在的当前 div？

How do I use jQuery to append a variable (image tag) to the current div I'm currently in?

html

variables

jquery

append

this