домашняя страница I вторая страница есть домашняя страница, на которой отображается 6 кнопок. Каждая кнопка направляет меня на другую страницу, где есть некоторая информация и кнопка «Открыть». Обычно каждая кнопка должна направлять меня на определенную ссылку, но у меня проблема в том, что мой индекс всегда равен 0 и не меняется.
Я хочу, чтобы индекс зависел от решения, которое пользователь выбирает на домашней странице.
const solutions = [{}];
document.querySelectorAll('.discover-button').forEach(function(button, index) {
button.addEventListener('click', function(event) {
var solutionIndex = index; console.info(solutionIndex);
var videoIframe = document.getElementById('videoIframe');
var videoUrl = solutions[solutionIndex].url;
videoIframe.src = videoUrl;
document.getElementById('iframeContainer').style.display = 'block';
});
});
function closeIframe() {
var videoIframe = document.getElementById('videoIframe');
videoIframe.src = '';
document.getElementById('iframeContainer').style.display = 'none';
}
<button class = "discover-button">Discover</button>
<button class = "discover-button">Discover</button>
<button class = "discover-button">Discover</button>
<button class = "discover-button">Discover</button>
<button class = "discover-button">Discover</button>
<button class = "discover-button">Discover</button>
<div class = "iframe-container" id = "iframeContainer">
<button class = "close-iframe" onclick = "closeIframe()">X</button>
<iframe id = "videoIframe" title = "Video presentation"></iframe>
</div>
Когда я запускаю ваш фрагмент, нажатие на кнопку регистрирует ожидаемое solutionIndex
. Как вы думаете, почему индекс неправильный?
С какой кнопкой проблема? На главной странице есть 6 кнопок «Обнаружить». Вы также упоминаете кнопку «Обнаружить» на странице, на которую она перенаправляет (в iframe). Если проблема связана с этой кнопкой, вам необходимо опубликовать этот код.
Вы можете добавить индекс кнопки в качестве параметра в URL-адрес источника iframe.
Javascript и веб-разработка вообще не моя сфера. Я больше занимаюсь искусственным интеллектом и наукой о данных, но это веб-страница, на которой должно отображаться 6 вариантов использования ИИ, по сути, у меня на домашней странице есть 6 вариантов использования, каждый из которых имеет свою страницу с кнопка «Обнаружить», которая отображает демо-версию. Моя проблема теперь в том, что какой бы вариант использования я ни нажимал, он всегда отображает одну и ту же демонстрацию в iframe, я не знаю, почему
Я хочу, чтобы индекс устанавливался в зависимости от варианта использования, который выбирает пользователь.
Я добавил фотографии для помощи
Однако все ваши кнопки одинаковы; что вы ожидаете изменить? Вторым аргументом forEach()
всегда будет индекс элемента в объекте, похожем на массив, который вы выполняете итерацию.
В вашем примере индексная переменная, созданная в обратном вызове forEach
, доступна в обратном вызове обработчика событий click
из-за вещи в JS (и некоторых других языках), называемой «замыканием». Итак, как сказал Бармар, журнал получает правильный индекс. Если вы хотите предотвратить ошибку, которую он выдает, вам нужно определить что-то для каждого индекса, например, больше анонимных пустых объектов ([{}, {}, {}, {}, {}, {}]
).
Судя по предоставленному вами фрагменту кода, строка 5 правильно регистрирует solutionIndex
, но строка 7 пытается получить доступ к элементу за пределами диапазона solutions
.
Как упоминал микаф в комментариях,
Вторым аргументом
forEach()
всегда будет индекс элемента в объекте, похожем на массив, который вы выполняете итерацию.
Добавление элемента url
к каждому объекту и как минимум шести объектов в массив solutions
должно работать нормально:
const solutions = [
{
url: "https://loremflickr.com/680/800/atm,bank,money"
},
{
url: "https://loremflickr.com/680/800/water,river,ocean,blue"
},
{
url: "https://loremflickr.com/680/800/rodent,mouse,gerbil"
},
{
url: "https://loremflickr.com/680/800/grafitti"
},
{
url: "https://loremflickr.com/680/800/debian,nature"
},
{
url: "https://loremflickr.com/680/800/sock,shoe"
},
];
document.querySelectorAll('.discover-button').forEach(function(button, index) {
button.addEventListener('click', function(event) {
var solutionIndex = index; console.info(solutionIndex);
var videoIframe = document.getElementById('videoIframe');
var videoUrl = solutions[solutionIndex].url;
videoIframe.src = videoUrl;
document.getElementById('iframeContainer').style.display = 'block';
});
});
function closeIframe() {
var videoIframe = document.getElementById('videoIframe');
videoIframe.src = '';
document.getElementById('iframeContainer').style.display = 'none';
}
<button class = "discover-button">Discover</button>
<button class = "discover-button">Discover</button>
<button class = "discover-button">Discover</button>
<button class = "discover-button">Discover</button>
<button class = "discover-button">Discover</button>
<button class = "discover-button">Discover</button>
<div class = "iframe-container" id = "iframeContainer">
<button class = "close-iframe" onclick = "closeIframe()">X</button>
<iframe id = "videoIframe" title = "Video presentation"></iframe>
</div>
Пожалуйста, обновите демо-версию выше, чтобы она отображала вашу проблему. Совет: используйте
let
иconst
в 2024 году вместоvar
.