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

Question

我正在尝试根据 HTML 文件输入更改 img 的 src。

标记如下(请注意，为了调试，我为第二个图像设置了一个 id，该 id 是“test”)。

  <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 选择器，但我认为是一个正确的选择器。

出了什么问题？

Answer 1

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

这里有两个选择:

1. 使用 jQuery 对象内的第一个元素(这是对 DOM 元素的引用):imgtag[0].src = event.target.result
2. 使用 jQuery 对象的 attr 函数:imgtag.attr('src', event.target.result)