Question

我在div中有一个图像，在div外面有一个输入，我试图获取每个图像源并将其放在输入值中，我想将图像作为变量，如何我可以把这个变量的来源放在输入值中吗？

＆＃13;

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

＆＃13;

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

＆＃13;

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 );
});

＆＃13;

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

＆＃13;

input {
  width: 100%;
}

＆＃13;

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

＆＃13;

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)单独循环遍历所有输入然后遍历到特定于实例的图像以返回值

＆＃13;

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

＆＃13;

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

＆＃13;

获取图像变量src属性

3 个答案: