运行功能后DOM不会刷新答案

【问题标题】：DOM won't refresh after run function运行功能后DOM不会刷新
【发布时间】：2023-04-05 22:21:02
【问题描述】：

我正在尝试制作一些带有预览的上传图片功能，我将图片URL推送到数组并放置if条件以避免上传超过1张图片，并在删除图片预览时清空数组。
但是我有一些问题，当我选择一些图像让说图像 A 并将其删除预览框时，它应该可以在下一步中选择图像 A，但它不能，除非我选择另一个名称不同的图像，下面是我的代码：

var arrCover = [];
var arrIm = [];

function uploadBanner(arr, prefix) {
    var cover;
    if(arr === 'coverBanner'){
        cover = ($('.campaign-cover-image'))[0].files[0];
        arr = arrCover;
    }else {
        cover = ($('.campaign-im-image'))[0].files[0];
        arr = arrIm;
    }

    if (cover) {
        var reader = new FileReader();
        reader.onload = function (e) {
            const image = e.target.result;
            arr.push(image);
            if(arr.length < 2){
                var imgs = $(`
                    <div class="campaign-cover-image${prefix}">
                    <img class="image-cover${prefix}" 
                    src=${arr.slice(-1)}>
                    </div>`);
                var removeIcon = $(`<div class="delete-cover${prefix}">x</div>`);
                $('.campaign-cover' + prefix).append(imgs);
                $('.campaign-cover-image' + prefix).append(removeIcon);
            } else {
                alert('only 1 image');
            }
        };
        reader.readAsDataURL(cover);
    }

    $(document.body).on('click','.delete-cover' + prefix, function(){
        if(prefix === "-banner"){
            var prevImg = $('.image-cover' + prefix).attr('src');
            arrCover.filter(function(el){
                var prevArr =  el === prevImg;
                if(prevArr){
                    arrCover = [];
                    $('.campaign-cover-image'+ prefix).val('');
                }
            });
            $(this).closest('.campaign-cover-image' + prefix).remove();
        }
    });
}
$(document).ready(function(){
  uploadBanner();
});

#upload_button {
  display: inline-block;
}
#upload_button input[type=file] {
  display:none;
}
.btn {
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="campaign-cover-banner"></div>
  <div id="upload_button">
    <label>
      <input
        type="file"
        class="campaign-cover-image"
        onchange="uploadBanner('coverBanner','-banner');"
      /><br>
    <span class="btn btn-primary">Add image1</span>
    </label>
  </div>
  
  <div class="campaign-cover-im"></div>
  <div id="upload_button">
    <label>
      <input
        type="file"
        class="campaign-im-image"
        onchange="uploadBanner('imBanner','-im');"
      /><br>
      <span class="btn btn-primary">Add image2</span>
    </label>
</div>
</body>
</html>

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

这有点hacky，但你可以尝试刷新你的dom。

worker 效果很好！

Force DOM refresh in JavaScript

【讨论】：

如果您发现另一个问题可以回答这个问题，请标记为重复关闭，不要只是链接到它。