javascript - 动态选择一个img以更改其来源的问题

我正在尝试基于HTML src更改img的file input。

标记如下（请注意，对于调试，我将ID设置为第二个图像，该ID为“测试”）。

  <div class="row">
    <div class="col-md-3">
      <img class='thumb' src='../images/placeholder.jpg'>
      <div>
        <input type="file" class='file-input' />
        <button class="btn btn-primary editbtn">EDIT</button>
      </div>
    </div>
    <div class="col-md-3">
      <img id='test' class='thumb' src='../images/placeholder.jpg'>
      <div>
        <input type="file" class='file-input' />
        <button class="btn btn-primary editbtn">EDIT</button>
      </div>
    </div>
    <div class="col-md-3">
      <img class='thumb' src='../images/placeholder.jpg'>
      <div>
        <input type="file" class='file-input' />
        <button class="btn btn-primary editbtn">EDIT</button>
      </div>
    </div>
    <div class="col-md-3">
      <img class='thumb' src='../images/placeholder.jpg'>
      <div>
        <input type="file" class='file-input' />
        <button class="btn btn-primary editbtn">EDIT</button>
      </div>
    </div>
  </div>

这是JavaScript代码：

$(".editbtn").click(function(){
  $(this).parent().find(".file-input").trigger("click");
});

$(".file-input").change(function(event){
  var selectedFile = event.target.files[0];
  var reader = new FileReader();

  var imgtag = document.getElementById("test");
  imgtag.title = selectedFile.name;

  reader.onload = function(event) {
    imgtag.src = event.target.result;
  };

  reader.readAsDataURL(selectedFile);
});

它有效，但是它具有var imgtag = document.getElementById("test");，如果我为此更改该行，它将不起作用：var imgtag = $(this).parent().parent().find(".thumb");

也许这不是最佳的jquery选择器，但我认为是正确的选择器。

怎么了？

最佳答案

如果使用var imgtag = $(this).parent().parent().find(".thumb")，则imgtag变量是jquery对象，而不是对DOM对象的引用，因此不能使用imgtag.src。

您在这里有两个选择：


使用jQuery对象内部的第一个元素（对DOM元素的引用）：imgtag[0].src = event.target.result
使用jQuery对象的attr函数：imgtag.attr('src', event.target.result)

关于javascript - 动态选择一个img以更改其来源的问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41316488/