如何在 append HTML 代碼之前將 URL 分配給 src 屬性

Question

對於這種奇怪的情況，我需要一個答案。 我會盡量解釋清楚。 我正在嘗試使用 jQuery 生成這段 HTML 代碼（我現在將其稱為模板）。

在圖像標簽中，我已經使用了一個 src，檢查我是否可以獲得帶有創建 HTML 的 URL 但除非調試，否則沒有必要。

         <script id="previewImg" type="text/html">
             <div class="position-relative">
                  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/55/2017_Ford_Mustang_%2844528207214%29.jpg/375px-2017_Ford_Mustang_%2844528207214%29.jpg" class="uploaded-img-preview border-radius-lg shadow text-center" />
                 <div class="rounded-circle uploaded-file-remove-btn">
                     <span class="fa fa-trash text-white"></span>
                 </div>
             </div>
         </script>

在這里你可以看到核心代碼沒什么奇怪的，只是一些變量聲明、初始方法等。一切正常。 As you can guess alert works and shows us the URL ( https://upload.wikimedia.org/wikipedia/commons/thumb/5/55/2017_Ford_Mustang_%2844528207214%29.jpg/375px-2017_Ford_Mustang_%2844528207214%29.jpg )

        const totalImageCount = 3;
        let uploadedFileURLs;

        $(document).ready(function () {
            uploadedFileURLs = new Array();
            previewImages = new Array();
            alert("src of image   " + $($("#previewImg").html()).find("img").attr("src"));
        });


        $(function () {
            $('#img-upload').change(function (event) {
                for (let i = uploadedFileURLs.length; i < event.target.files.length; i++) {
                    let url = URL.createObjectURL(event.target.files[i]);
                    uploadedFileURLs.push(url);
                }

                UpdatePreviewImages();
            });
        })

但是...如果您查看我的代碼的那一部分。 那是我剛剛花了大約 5 個小時的黑魔法（我是 js 和 jQuery 的新手），但它仍然不起作用。 盡管如此，我仍然無法為 created 分配 src（鏈接不是 null ofc 我一次又一次地檢查了所有這些）我指定的行（此行注釋）沒有分配值。 當我查看頁面源代碼時，它顯示 img 標簽的 src 屬性為 src(unknown)

        function UpdatePreviewImages() {
          for (var i = 0; i < uploadedFileURLs.length; i++) {
            let previewImg = $("#previewImg").html();
            $($(previewImg).html()).find("img").attr("src", uploadedFileURLs[i]); // this line
            $("#previewImageContainer").append(previewImg);
          }
        }

但是如果我先 append 模板（一些 HTML 元素），然后分配 src 值。 它確實分配。 問題在這里，它將為所有創建的模板的 img 元素的 src 分配相同的 URL。 例如，如果您上傳 3 張照片，所有這些照片都將顯示為您選擇的最后一張照片。

        function UpdatePreviewImages() {
          for (var i = 0; i < uploadedFileURLs.length; i++) {
            let previewImg = $("#previewImg").html();
            let createdImg = $("#previewImageContainer").append(previewImg);
            $(createdImg).find("img").attr("src", uploadedFileURLs[i]); // this line
           }
         }

我錯過了什么？

Answer 1

最好使用常規的 querySelectors 而不是 find。

        function UpdatePreviewImages() {
          for (var i = 0; i < uploadedFileURLs.length; i++) {
            // get the image like this
            let image = $("#previewImg img");
            image.attr("src", uploadedFileURLs[i])
            let previewImg = $("#previewImg").html();
            let createdImg = $("#previewImageContainer").append(previewImg);
            // No need for this line anymore, because the src is already set
            // $(createdImg).find("img").attr("src", uploadedFileURLs[i]);
           }
         }

Answer 2

我剛剛解決了問題，主要原因是Js不是OOP語言。 它不會像 OOP 語言那樣存儲變量（我使用 C# 4 年以上）

當您嘗試創建變量並更改源時，它會更改但不會影響 previewImg 變量。 因為它不再關心創建的變量......簡而言之，這將解決問題。

function UpdatePreviewImages() {
            for (var i = 0; i < uploadedFileURLs.length; i++) {
                let previewImg = $($("#previewImg").html()).find("img").attr("src", uploadedFileURLs[i]);
                $("#previewImageContainer").append(previewImg);
            }
        }