如何为 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);

        }