У меня есть всплывающий сценарий JS в цикле WP, но я не могу получить правильный заголовок, чтобы показать

Question

У меня есть боковая панель на сайте WordPress, в которой перечислено несколько постов с аудиофайлами.Когда пользователь нажимает кнопку «Воспроизведение» на этой боковой панели, соответствующий аудиофайл должен загружаться во всплывающем окне, которое также показывает заголовок воспроизводимого звука.На данный момент я поместил JS-скрипт в цикл, но всплывающее окно загружает только то, что является последним в цикле ... Пользователь нажимает на верхнюю звуковую ссылку на боковой панели, но в основном получает нижнюю.

У меня есть идея, почему это происходит, потому что сначала PHP запускается на сервере, а всплывающее окно JS просто захватывает последний элемент в цикле PHP.Но я застрял ... как сделать так, чтобы всплывающее окно захватывало нужную информацию аудио поста?Заранее большое спасибо за ответ.

Answer 1

Мне нужно бежать, но без кода (на момент написания этой статьи в вопросе нет кода; надеюсь, что он изменится) , я могу угадать в этом.Хотя это всего лишь предположение.

Я бы сказал, что вы создаете замыкания в цикле, например:

for (index = 0; index < data.length; ++index) {
    link = /* ...code to create the link... */;
    title = data[index].title; // Or maybe it's on `link` itself
    link.onclick = function() {
        doNiftyPopup(title);
    };
}

Анонимная функция - это замыкание.Это даст вам симптом, который вы испытываете.Когда вы создаете замыкание, оно имеет стойкую ссылку на то, над чем оно закрывается (например, title), а не копию его значения при создании замыкания.И поэтому все эти обработчики onclick будут использовать последнее значение, присвоенное title, что, конечно, является последним значением в цикле.

Исправление состоит в том, чтобы дать закрытию что-то еще, чтобы закрыть этоне будет перезаписан, как это:

for (index = 0; index < data.length; ++index) {
    link = /* ...code to create the link... */;
    title = data[index].title; // Or maybe it's on `link` itself
    link.onclick = createHandler(title);
}

function createHandler(thisTitle) {
    return function() {
        doNiftyPopup(thisTitle);
    };
}

Теперь каждый вызов createHandler создает закрытие по аргументу thisTitle, который был создан для этого конкретного вызова - каждое закрытие получает свою собственную вещьзакрыть.

Подробнее здесь: Затворы не сложны