单击图像会将URL粘贴到文本字段中

Question

我对以下问题有点困惑，我想我对如何继续有了一个想法，但我不是百分百肯定。我实现了一个PHP Web scraper来从URL获取数据。如您所见，9gag主页上的图像正确显示在前端。

我现在的问题是，如果用户点击其中一张图片，我希望将图片中的直接网址发布到第一张表单的文本字段“网址”中。这是用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库，并在页面底部添加此代码

<强> 实施例： -

＆＃13;

＆＃13;

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

＆＃13;

img{
  cursor:pointer;
}

＆＃13;

<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/>

＆＃13;

＆＃13;

＆＃13;