发出动态选择 img 以更改其来源的问题答案

【问题标题】：Issue selecting dynamically an img to change its source发出动态选择 img 以更改其来源的问题
【发布时间】：2016-12-25 04:22:55
【问题描述】：

我正在尝试根据 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 选择器，但我认为是正确的选择器。

怎么了？

【问题讨论】：

标签： javascript jquery html jquery-selectors

【解决方案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)

【讨论】：

很棒的答案，感谢您的解释！我选择了选项 2。
太棒了 :) 你可以同时使用这两个选项（第二个选项更安全一些，因为如果没有这样的元素，第一个选项会导致 javascript 错误）。

【解决方案2】：

你可以使用.parent()、.prev()和"img"作为参数返回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>

【讨论】：