javascript - 单击图像会将 url 粘贴到文本字段中

Question

我对以下问题有点困惑，我想我对如何进行有一个想法，但我不是 100% 确定。我实现了一个 PHP 网络爬虫来从 URL 获取数据。正如您所看到的，在 9gag 主页上找到的图像正在前端正常显示。

我现在的问题是，如果用户单击其中一个图像，我希望将图像的直接 URL 发布到第一个表单的文本字段“URL”中。这是用 JQuery/JS 完成的吗？比如 on.click 事件之类的？非常感谢任何反馈让我上路。

提前致谢。

这是前端:

Answer 1

你可以像下面那样做:-

$('img').on('click',function(){
  //using id
  $('#url-text-field-id').val($(this).attr('src'));
   //using class
  $('.url-text-field-class').val($(this).attr('src'));
});

注意:- 你需要在这段代码之前添加jQuery库，并在页面底部添加这段代码

示例:-

$('img').on('click',function(){
  //using id
  $('#url_image').val($(this).attr('src'));
   //using class
  $('.url_img').val($(this).attr('src'));
});

img{
  cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img src="http://www.futomicdesigns.com/images/home-interior/home-interior-designers-gurgaon/futomic-designs-interior-designers-gurgaon.jpg"><br/><br/>

<input type="text" placeholder="URL" id="url_image"><br/><br/>

<input type="text" placeholder="URL" class="url_img"><br/>