发布动态选择 img 以更改其源

Question

我正在尝试根据 HTML file input.

更改 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.

这里有两个选择：

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

Answer 2

您可以使用 .parent()、.prev() 和 "img" 作为 return jQuery 对象的参数，然后 [0] 引用 DOM 元素

var imgtag = $(this).parent().prev("img")[0];

或者如果 html 树保持不变

var imgtag = this.parentElement.previousElementSibling;

注意，imgtag 引用 DOM 元素，而不是 jQuery 对象；其中 title 和 src 是 DOM 元素属性

imgtag.title = selectedFile.name;
imgtag.src = event.target.result;

$(".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 = $(this).parent().prev("img")[0];
  imgtag.title = selectedFile.name;

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

  reader.readAsDataURL(selectedFile);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

发布动态选择 img 以更改其源

Issue selecting dynamically an img to change its source

html

javascript

jquery

jquery-selectors