javascript - 将图像源放入最接近的输入值

Question

我有多个图像和多个输入，输入本身应该在其值内具有最接近的图像源，我设法将图像源放在输入值内，但它们都具有相同的值，我希望每个输入都采用最接近的图像源的值，这是我的代码:

var imgSrc = $('img').attr('src');
console.log(imgSrc);
$(".test").val(imgSrc);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://www.placehold.it/1920x1080">
<input class=".test">

<img src="http://www.placehold.it/350x400">
<input class=".test">

<img src="http://www.placehold.it/950x1000">
<input class=".test">

<img src="http://www.placehold.it/500x180">
<input class=".test">

Answer 1

您必须循环输入:

$(".test").each(function() {
$(this).val($(this).prev('img').attr('src'));
})

此外，您可以(并且应该)从 HTML 中的类名称中删除 .(点)。

演示:

$(".test").each(function() {
$(this).val($(this).prev('img').attr('src'));
})

input {
  display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://www.placehold.it/100x100">
<input class="test">

<img src="http://www.placehold.it/200x100">
<input class="test">

<img src="http://www.placehold.it/300x100">
<input class="test">

<img src="http://www.placehold.it/120x120">
<input class="test">