共享相同元素时仅更新单个元素 class

Question

我在下方 jquery 显示了来自文件输入的图像预览。

$(".imgshowinput").change(function () {
    readURL(this);
});


function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('.imgshow').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

以上代码运行良好，但问题是它使用相同的 class

更新所有 img 元素

截图

blade

<div class="card" style="width: 18rem;">
    <img id="studphoto" name="studphoto" class="card-img-top imgshow" src="" alt="Card image cap">
    <div class="card-body">             
        <input type="file" name="spic" class="imgshowinput" accept="image/*">
    </div>
</div>
<div class="card" style="width: 18rem;">
<img id="aadphoto" name="aadphoto" class="card-img-top imgshow" src="" alt="Card image cap">
    <div class="card-body">
        <input type="file" name="aadpic" class="imgshowinput" accept="image/*">
    </div>
</div>

关于在使用相同 class 时仅更新特定 img 元素的任何建议？

Answer 1

只需添加您要更改的 img 的 id，函数将是：

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#studphoto.imgshow').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

Answer 2

使用jquery的壁橱方法如下

$(input).closest('.imgshow'). attr('src', e.target.result);

并完成 javascript

$(".imgshowinput").change(function () {
readURL(this);
});
function readURL(input) {
   if (input.files && input.files[0]) {
     var reader = new FileReader();

     reader.onload = function (e) {
          $(input).closest('.imgshow'). attr('src', e.target.result);
     }

    reader.readAsDataURL(input.files[0]);
 }
}

Answer 3

只需像这样更新您的 readURL 函数：

function readURL(input) {
  // Gets .card for this input
  var card = $(input).parent().parent();
  
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) { 
          // Finds img inside of .card and sets the attribute    
          $(card.find('img').attr('src', e.target.result));
        }
        reader.readAsDataURL(input.files[0]);
    }
}

我在我的 codepen 页面上为您解决了。

$(".imgshowinput").change(function () {
    readURL(this);
});

function readURL(input) {
  var card = $(input).parent().parent();
  
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {     
          $(card.find('img').attr('src', e.target.result));
        }
        reader.readAsDataURL(input.files[0]);
    }
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  color: #fcbe24;
  background-color: #18222d;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.test {
  display: flex;
}
img {
  width: auto;
  height: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card" style="width: 18rem;">
    <img id="studphoto" name="studphoto" class="card-img-top imgshow" src="" alt="Card image cap">
    <div class="card-body">             
        <input type="file" name="spic" class="imgshowinput" accept="image/*">
    </div>
</div>
<div class="card" style="width: 18rem;">
<img id="aadphoto" name="aadphoto" class="card-img-top imgshow" src="" alt="Card image cap">
    <div class="card-body">
        <input type="file" name="aadpic" class="imgshowinput" accept="image/*">
    </div>
</div>

共享相同元素时仅更新单个元素 class

update only single element while sharing same class

html

javascript

php

jquery

laravel