共享同一類時僅更新單個元素

我有下面的 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]);
    }
}

上面的代碼運行良好，但問題是它使用同一個類更新所有 img 元素

截屏

刀

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

任何建議在使用同一類時僅更新特定的 img 元素？

uj5u.com熱心網友回復：

使用 jquery 的 closet 方法如下

$(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]);
 }
}

uj5u.com熱心網友回復：

只需添加您要更改的 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]);
    }
}

uj5u.com熱心網友回復：

只需像這樣更新您的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]);
    }
}

我在我的代碼筆頁面上為你解決了這個問題。

顯示代碼片段

$(".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>

標籤：javascript php html jQuery 拉拉维尔

上一篇：在dynamoDB中為GSI使用SortKey的任何缺點

下一篇：使用JavaScript查找第N個孩子并希望創建Treeview