获取图像变量src属性

Question

我在div内部有一个图像，在div外部有一个输入，我正在尝试将每个图像源放入输入的值中，我想将图像作为变量，我如何获取此变量的来源和把它放在输入值中？

 var image = "img" console.log('image'); $("input").val(image.attr('src')); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <img src="http://via.placeholder.com/350x150"> </div> <input type="text"> <div> <img src="http://via.placeholder.com/300x150"> </div> <input type="text"> <div> <img src="http://via.placeholder.com/250x150"> </div> <input type="text"> 

Answer 1

您可以遍历它们并获取每个人的来源，然后将其影响到下一个输入：

$('img').each(function() {
  var image = $(this);

  //Using the variable 'image'
  image.closest("div").next("input").val( image.attr('src') );

  //Or just like
  $(this).closest("div").next("input").val( this.src );
});

 $('img').each(function() { var image = $(this); image.closest("div").next("input").val(image.attr('src')); }) 

 input { width: 100%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <img src="http://via.placeholder.com/350x150"> </div> <input type="text"> <div> <img src="http://via.placeholder.com/300x150"> </div> <input type="text"> <div> <img src="http://via.placeholder.com/250x150"> </div> <input type="text"> 

Answer 2

将逻辑组件打包到单个DOM节点中是一种很好的做法。 你的结构方式，图像和输入之间没有逻辑联系，除了一个在另一个旁边的事实。 仅仅因为希拉坐在我旁边的隔间里并不意味着我们在一起工作。

相反，看看我在下面得到了什么 - 每个图像/输入都包含在div中。 输入应该看到的唯一图像就在同一个容器中。 现在希拉与我在同一个小隔间，我们现在正在做同样的事情，可以互相参考。

而且，不是图像和输入需要彼此了解，我要求容器本身设置这些值。 通过这样做，碎片更松散地耦合。

 var containerEls = $(".container"); containerEls.each(function(){ var imgEl = $(this).find("img"); var inputEl = $(this).find("input[type=text]"); inputEl.val(imgEl.attr("src") ); }); 

 input { width: 400px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div> <img src="http://via.placeholder.com/350x150"> </div> <input type="text"> </div> <div class="container"> <div> <img src="http://via.placeholder.com/300x150"> </div> <input type="text"> </div> <div class="container"> <div> <img src="http://via.placeholder.com/250x150"> </div> <input type="text"> </div> 

Answer 3

使用val(function)单独循环遍历所有输入然后遍历到特定于实例的图像以返回值

 $("input").val(function() { return $(this).prev().find('img').attr('src'); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <img src="http://via.placeholder.com/350x150"> </div> <input type="text"> <div> <img src="http://via.placeholder.com/300x150"> </div> <input type="text"> <div> <img src="http://via.placeholder.com/250x150"> </div> <input type="text">