Question

我尝试根据HTML src更改img的{{1}}。

标记如下（请注意，对于调试我将id设置为第二个图像，id为＆＃34; test＆＃34;）。

file input

这是JavaScript代码：

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

它有效，但它有$(".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");

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

出了什么问题？

Answer 1

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

这里有两个选项：

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

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

问题动态选择img来改变其来源

2 个答案: