Question

我在选择同一父Div的更改功能时遇到问题。调用背景图片网址替换功能时，它将替换所选类的所有背景图片网址。我可以知道如何在同一个父div内进行更改吗？

我尝试使用.parent和.closest，但无法正常工作。

<div class="form-group row">
    <div class="col-md-6">
        <div class="imagePreview"></div>
        <input type="file" class="uploadFile img" value="Upload Photo">
    </div>
    <div class="col-md-6">
        <div class="imagePreview"></div>
        <input type="file" class="uploadFile img" value="Upload Photo">
    </div>
</div>

这是我正在使用的jQuery代码

$(function () {
    $(".uploadFile").on("change", function () {
        var files = !!this.files ? this.files : [];
        if (!files.length || !window.FileReader) return;
        if (/^image/.test(files[0].type)) {
           var ReaderObj = new FileReader();
           ReaderObj.readAsDataURL(files[0]);
           ReaderObj.onloadend = function () {
               $(".imagePreview").css("background-image", "url(" + this.result + ")");
           }
        }
    });
});

Answer 1

您还可以使用jquery中的'prev（）'，它将返回该元素的前一个同级元素。

$(function () {
   $(".uploadFile").on("change", function () {

     var $input = $(this);
     var files = !!this.files ? this.files : [];

     if (!files.length || !window.FileReader) return;

        if (/^image/.test(files[0].type)) {
          var ReaderObj = new FileReader();
          ReaderObj.readAsDataURL(files[0]);
          ReaderObj.onloadend = function () {
          $input.prev().css("background-image", "url(" + this.result + ")");
       }
     }
  });
});

Answer 2

使用此行显示针对特定敌人的图片。

 $(this).parent().find(".imagePreview").css("background-image", "url(" + this.result + ")");

Answer 3

您可能要做的就是-在变更呼叫中，获取当前.uploadfile的父级，然后在onloadend中搜索父级中的.imagePreview。

类似-

$(function () {
    $(".uploadFile").on("change", function () {

    var parentDiv = $(this).parent();
    var files = !!this.files ? this.files : [];

    if (!files.length || !window.FileReader) return;

    if (/^image/.test(files[0].type)) {
        var ReaderObj = new FileReader();
        ReaderObj.readAsDataURL(files[0]);
      ReaderObj.onloadend = function () {
          $(parentDiv).find(".imagePreview").css("background-image", "url(" + this.result + ")");
      }
    }
});
});

尝试摆弄 https://jsfiddle.net/stdeepak22/cy46x7z3/

同一父div的更改功能背景

3 个答案: