如何為 HTML 中動態添加的元素添加索引？

Question

我正在嘗試在 HTML 中構建一個 PDF 查看器，側面有一個縮略圖視圖。 我閱讀了每一頁並動態 append 和 canvas 到該頁面的縮略圖 window 。 我已經添加了 onclick 事件來更改單擊的特定縮略圖的活動 state。 如何將“函數 renderFullPage(pagenumber){.....}”添加到事件中。 具體來說，如何返回與特定縮略圖關聯的頁碼？

function renderFullPDF() {
            var wrapper = document.getElementById('pdfPreview');
            function renderPages(pdfDoc) {
                for (var num = 1; num <= pdfDoc.numPages; num++) {
                    pdfDoc.getPage(num).then(function renderPage(page, num) {
                        var canvas = document.createElement('canvas');
                        canvas.className = "pdfPageThumb";
                        var viewport = page.getViewport(canvas.width / page.getViewport(1.0).width);
                        var ctx = canvas.getContext('2d');
                        var renderContext = {
                            canvasContext: ctx,
                            viewport: viewport
                        };
                        canvas.height = viewport.height;
                        canvas.width = viewport.width;
                        wrapper.appendChild(canvas)
                        page.render(renderContext);

                        canvas.addEventListener("click", function () {
                            var current = document.getElementById('pdfPreview').getElementsByClassName("active");
                            if (current.length > 0) {
                                current[0].className = current[0].className.replace(" active", "");
                            }
                            this.className += " active";
                        });
                    });
                }
            }

            pdfjsLib.disableWorker = true;
            pdfjsLib.getDocument('myfile.pdf').then(renderPages);

        }

Answer 1

您必須正確 scope 您的變量和參數。 getPage(num) 返回的 promise 可能只將一個參數傳遞給then這意味着您已經在初始化為undefined的新 scope 中創建了一個名為 num 的變量。 我建議你添加一個匿名的 function 調用，參數為num ，如下所示。 這樣，當 promise 被填充時，num 將被定義為正確的值。

function renderFullPDF() {
            var wrapper = document.getElementById('pdfPreview');
            function renderPages(pdfDoc) {
                for (var num = 1; num <= pdfDoc.numPages; num++) {
                    (function (num) { // Anonymous function creates new scope when called
                    pdfDoc.getPage(num).then(function renderPage(page) {
                        var canvas = document.createElement('canvas');
                        canvas.className = "pdfPageThumb";
                        // from @Taplar but likely optional at this
                        // point since num from this anonymous
                        // function scope will be available
                        // (captured) in your event listener.
                        canvas.setAttribute('data-index', num); 
                        var viewport = page.getViewport(canvas.width / page.getViewport(1.0).width);
                        var ctx = canvas.getContext('2d');
                        var renderContext = {
                            canvasContext: ctx,
                            viewport: viewport
                        };
                        canvas.height = viewport.height;
                        canvas.width = viewport.width;
                        wrapper.appendChild(canvas)
                        page.render(renderContext);

                        canvas.addEventListener("click", function () {
                            var current = document.getElementById('pdfPreview').getElementsByClassName("active");
                            if (current.length > 0) {
                                current[0].className = current[0].className.replace(" active", "");
                            }
                            this.className += " active";
                        });
                    });

                   })(num); // Pass num parameter
                }
            }

            pdfjsLib.disableWorker = true;
            pdfjsLib.getDocument('myfile.pdf').then(renderPages);

        }