Блог

Главная - Вопросы по программированию - Если щелкнуть по одному элементу в массиве, добавьте класс в тот же n-й другой массив

Если щелкнуть по одному элементу в массиве, добавьте класс в тот же n-й другой массив

#javascript #arrays

#javascript #массивы

Вопрос:

Я хочу, чтобы элемент отображался при нажатии на ссылку. Я создал массив всех ссылок.

Я хочу добавить класс «show» в массив <div> s. Потенциально, если решение имеет больше смысла <div> , они могут находиться внутри привязки, не имеет значения, что они будут перекрывать экран.

HTML

 <div class="grid-container">
    <a href="#"> <!-- lot's of <a>'s will make the array -->
        <div class="grid-item">
            <div class="grid-item--inner-container">
                <div class="grid-item--normal-content">
                        <div class="grid-item--heading">
                            <h2>Lending Creativity</h2>
                        </div>
                        <div class="grid-item--border">amp;nbsp;</div>
                </div><!-- end normal content -->
            </div><!-- Grid-item-inner -->
        </div><!-- Grid item -->
    </a>
~

Вторая часть HTML.

 <div class="popup-container hidden"><!-- many -->
  <div class="grid-item--popup-content" id="lending-creativity--popup">
    <button class="close-button"><i class="fa fa-times"></i><span class="close-button--text-hidden">Close</span></button>
  </div>
</div>
~

JavaScript

 let griditems       = document.getElementsByClassName('grid-container')[0].getElementsByTagName('a');
let popupitems      = document.getElementsByClassName('popup-container');
let closebuttons    = document.getElementsByClassName('close-button');

document.addEventListener("DOMContentLoaded", function() {
    for (let i = 0; i < griditems.length; i  ) {
        griditems[i].addEventListener("click", function () {
            popupitems[i].style.display = "flex";
        })
    }
    for (let i = 0; i < griditems.length; i  ) {
        closebuttons[i].addEventListener("click", function () {
            closebuttons[i].style.display = "none";
        })
    }
})

Я получаю сообщение об ошибке closebuttons is not defined . Наверное, я не уверен на 100%, что я делаю это правильно, это лучший способ решить эту проблему?

Комментарии:

1. Если они имеют одинаковую длину, зачем два цикла?

2. Ваш второй цикл должен использовать i < closebuttons.length

3. Я подозреваю, что вы неправильно прочитали сообщение об ошибке. Он не сказал closebuttons , что не определено, он сказал, что closebuttons[i] не определено. Потому что элементов сетки больше, чем кнопок закрытия.

4. @epascarello Я вижу, вы правы, я могу выполнить один цикл for, а затем две функции. Хорошая идея, спасибо.

5. Спасибо, что вы все помогли мне лучше понять это. В конце я также решил, что добавление класса было более эффективным способом управления этим, поэтому я просто добавил скрытый класс или убрал его, чтобы скрыть мое всплывающее окно. Если кто-то из вас захочет добавить правильный ответ, я награжу вам эти вкусные, вкусные очки.

Ответ №1:

Проблема была closebuttons[i] is undefined . Элементов сетки было больше, чем кнопок закрытия.

Я мог бы также упростить свой JavasScript, поскольку циклы должны были быть одинаковой длины.

 let griditems       = document.getElementsByClassName('grid-container')[0].getElementsByTagName('a');
let popupitems      = document.getElementsByClassName('popup-container');
let closebuttons    = document.getElementsByClassName('close-button');

document.addEventListener("DOMContentLoaded", function() {
    for (let i = 0; i < griditems.length; i  ) {
        griditems[i].addEventListener("click", function () {
            popupitems[i].style.display = "flex";
        })
        closebuttons[i].addEventListener("click", function () {
            closebuttons[i].style.display = "none";
        })
    }
})

В конце концов я решил, что вместо изменения стиля я мог бы просто добавить класс или удалить его, который затем сохранит мой CSS в файле CSS / SCSS. Я нашел это более удобным в обслуживании, и нетехнические сотрудники могли бы написать CSS, который мог бы легко изменить это, если это когда-либо понадобится в будущем. Также было проще поддерживать, если мы когда-нибудь решили использовать block вместо flex или что-то подобное. Мы могли бы просто легко отредактировать его в элементе проверки, чтобы увидеть результаты.

Опять же, мой код, вероятно, можно было бы упростить, не выполняя 2 цикла. Но на всякий случай, если они были разной длины, я сохранил их в их собственных циклах.

Вот мой окончательный код.

 let griditems       = document.getElementsByClassName('grid-item--link');
let popupitems      = document.getElementsByClassName('popup-container ');
let closebuttons    = document.getElementsByClassName('close-button');

document.addEventListener("DOMContentLoaded", function() {
    for (let i = 0; i < griditems.length; i  ) {
        griditems[i].addEventListener("click", function () {
            popupitems[i].classList.remove("hidden");
            popupitems[i].classList.add("shown");
        })
    }
    for (let i = 0; i < closebuttons.length; i  ) {
        closebuttons[i].addEventListener("click", function () {
            popupitems[i].classList.add("hidden");
            popupitems[i].classList.remove("shown");
        })
    }
})