Стиль коробки, по-видимому, не применяется при добавлении новых элементов с помощью кнопки

См. связь. Ссылка на проект "Scroll-Animation" Я клонирую в локальном браузере, чтобы попрактиковаться в интерфейсе.

У меня есть две кнопки, +, -. «+» добавляет новые блоки, «-» удаляет блоки из тела. Я реализовал «+», но, похоже, стиль для ящиков не работает. То есть кажется, что элементы div, которые я создал, добавляются в тело, но элементы div не имеют стиля, как у меня в файле .css для .box { ... } Любая помощь в том, как это исправить, очень ценится. Спасибо!

стиль.css

...
.box {
    height: 200px;
    width: 400px;
    border-radius: 10px;
    background-color: steelblue;
    margin: 10px;
    color: white;
    display: grid;
    place-items: center;
    box-shadow: 2px 4px 5px rgba(0,0,0,.3);
    transform: translateX(-400%);
    transition: transform .5s ease;
}
.box:nth-of-type(even) {
    transform: translateX(400%);
}
.box.show {
    transform: translateX(0);
}
...

app.js

const boxes = document.querySelectorAll('.box');
const btns = document.querySelectorAll('.btn');

window.addEventListener('scroll', slideBox);

slideBox();

// NOTE: Need to fix.
btns.forEach(btn => {
    btn.addEventListener('click', (e) => {
        const cList = e.currentTarget.classList;

        if (cList.contains('add')) {
            console.info('Work');
            var h2 = document.createElement('h2');
            h2.innerHTML = 'Content';
            var newBox = document.createElement("div");
            var attr = document.createAttribute("class");

            attr.value = "box";
            newBox.setAttributeNode(attr);
            newBox.appendChild(h2);
            document.body.appendChild(newBox);
        }
    })
})

// NOTE: This function works!!!
function slideBox() {

    const pageBot = window.innerHeight / 5 * 4;
    const pageTop = window.innerHeight / 5 * 1;

    boxes.forEach(box => {
        const boxTop = box.getBoundingClientRect().top;
        const boxBot = box.getBoundingClientRect().bottom;

        if (boxTop < pageBot && boxBot > pageTop) {
            box.classList.add('show');
        } else {
            box.classList.remove('show');
        }
    })
}

index.html

<body>
    <h1>Scroll to see the animation</h1>
    <div class = "button-container">
        <button class = "btn add">+</button>
        <button class = "btn minus">-</button>
    </div>
    <!-- <div class = "box"><h2>Content</h2></div>
    <div class = "box"><h2>Content</h2></div>
    ...
    <div class = "box"><h2>Content</h2></div>  -->
    <script src = "app.js"></script>
</body>

javascript html css

18.03.2022 01:09

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

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

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я думаю, проблема в том, что после добавления нового ящика вы не запрашиваете все ящики снова в slideBox. Вы можете проверить исправление здесь

Полная модификация на Javascript с некоторыми комментариями

const btns = document.querySelectorAll('.btn');

window.addEventListener('scroll', slideBox)

slideBox();

btns.forEach(btn => {
  btn.addEventListener('click', (e) => {
    const cList = e.currentTarget.classList;

    if (cList.contains('add')) {
      console.info('Work');
      var h2 = document.createElement('h2');
      h2.innerHTML = 'Content';
      var newBox = document.createElement("div");
      var attr = document.createAttribute("class");

      attr.value = "box";
      newBox.setAttributeNode(attr);
      newBox.appendChild(h2);
      document.body.appendChild(newBox);
    }
  })
})


function slideBox() {
  //query all boxes every time you scroll because of new boxes
  const boxes = document.querySelectorAll('.box')
  const triggerBottom = window.innerHeight / 5 * 4

  boxes.forEach(box => {
    const boxTop = box.getBoundingClientRect().top

    if (boxTop < triggerBottom) {
      box.classList.add('show')
    } else {
      box.classList.remove('show')
    }
  })
}

Ааа. Да, мой плохой. такое простое исправление, но такое серьезное. Только хватал коробки в исходном состоянии.

— 18.03.2022 04:38

Примечание. (Не проверено). Но может также потребоваться вызвать slideBox внутри каждого обработчика кнопок, чтобы убедиться, что поле отображается даже без прокрутки.

— 18.03.2022 04:39

Ранее я добавил это, но думаю, что это бесполезно, потому что каждый раз, когда вы прокручиваете, он снова будет запрашивать все ваши кнопки, если только ваша кнопка внизу, где появляются новые кнопки @Seong

— 18.03.2022 04:45

18.03.2022 03:52