Доступ к переменным из родительской функции в событии jQuery click () (надстройка Word)

Question

Код для моей надстройки принимает поисковый запрос, а затем отображает список соответствующих ссылок в таблице.Каждая ссылка должна вставлять себя в текстовый документ при нажатии, но я не могу понять, как передать переменные в функцию jQuery .click().

В настоящее время, независимо от того, какую опцию я нажимаю,URL-адрес ссылки, вставляемой в документ word, всегда является 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));
                        }
                    });
            });
        }
    }
}

Думаю, я мог бы исправитьпроблема в определении переменной linkURL внутри самой функции click, но проблема в том, что я не могу получить к ней доступ filteredLinks[x].Я могу получить доступ к массиву filteredLinks самостоятельно, но он не может прочитать x, даже если функция click содержится в цикле?

Как последнее средствосупер хакерское исправление, я думаю, я мог бы просто изменить идентификатор каждого элемента, чтобы включить его URL, а затем извлечь его из linkName.currentTarget.innerText, но я бы предпочел этого не делать, если мне действительно не нужно.

Спасибо зазаранее!

Answer 1

Проблема заключается в том, что var в JavaScript является областью действия функции, и поскольку событие click вызывается после окончания цикла for, значение x всегда будет final значение 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);
}