Question

我的加载项的代码带有一个搜索词，然后在表上显示匹配链接的列表。每个链接都应该在单击时插入到Word文档中，但是我不知道如何将变量传递到jQuery .click()函数中。

当前，无论我单击什么选项，插入到Word文档中的链接的URL始终是列表中最后一项的URL。因此，例如，如果表中有3个结果：Facebook，Instagram和Yahoo，那么无论我单击哪个选项，插入的URL始终为http://www.yahoo.com

function displayLinks() {

    // Empty pre-existing results
    $('#linksTable').empty();
    var filteredLinks = [];

    // Grab value from search box
    var searchTerm = document.getElementById('linksSearchField').value;

    // Separate all links containing search term and put them in a filtered list
    for (var i = 0; i < numberOfLinks; i++) {
        if (sortedLinks[i].linkName.toLowerCase().includes(searchTerm.toLowerCase())){
            filteredLinks.push(sortedLinks[i]);
        }
    }

    // Get length of filtered links array
    var numberOfSearchResults = filteredLinks.length;

    // Populate table with loop
    if (searchTerm != '') {
        for (var x = 0; x < numberOfSearchResults; x++) {

            var table = document.getElementById('linksTable');
            var row = table.insertRow(x);
            var nameCell = row.insertCell(0);

            var linkName = filteredLinks[x].linkName;
            var linkNameFormattedForID = linkName.replace(/([ &/!*^%$#@+_-])+/g);
            var linkURL = filteredLinks[x].linkURL;

            // Add link to table
            nameCell.innerHTML = "<a href='javascript:void(0);' id='" + linkNameFormattedForID + "'>" + linkName + "</a>";

            // Code to add link to word document
            $('#' + linkNameFormattedForID).click(linkName, function (linkName) {

                Word.run(function (context) {
                    const doc = context.document;
                    const originalRange = doc.getSelection();
                    originalRange.insertHtml("<a href='" + linkURL + "'>" + linkName.currentTarget.innerText + "</a>", "Start");
                    originalRange.insertText("Refer to ", "Start");
                    originalRange.load("text");
                    return context.sync()
                })
                    .catch(function (error) {
                        console.log("Error: " + error);
                        if (error instanceof OfficeExtension.Error) {
                            console.log("Debug info: " + JSON.stringify(error.debugInfo));
                        }
                    });
            });
        }
    }
}

我认为我可以通过在click函数本身中定义linkURL变量来解决此问题，但是问题是我无法在其中访问filteredLinks[x]。我可以单独访问filteredLinks数组，但是即使click函数包含在循环中，也无法读取x吗？

作为最后的超级hacky修复程序，我认为我可以更改每个项目的ID以包含其URL，然后从linkName.currentTarget.innerText中提取它，但是除非我确实有，否则我不愿意这样做

谢谢！

Answer 1

问题在于JavaScript中的var是函数作用域的，并且由于click事件在for循环结束后之后被调用，因此x的值将始终是最终值为x。像这样的博客文章中有更多信息：https://medium.com/front-end-developers/es6-variable-scopes-in-loops-with-closure-9cde7a198744

解决方案：

使用let或const代替var

稍微差一点的解决方案：

将for循环的内容包装在IIFE中

for (var x = 0; x < numberOfSearchResults; x++) {
  (function(x){
       ...
   })(x);
}

在jQuery click（）事件（Word加载项）中从父函数访问变量

1 个答案: