Почему команда console.log не отображает информацию о классе?

Question

Мариан

javascript

Почему команда console.log не отображает информацию о классе?

У вас есть три изображения, при нажатии на каждое из которых открывается модальное окно, и для каждого окна создается свой собственный класс `modals-active`. Однако, при проверке через JavaScript на наличие этого класса в консоли выводится "no", несмотря на то, что класс действительно активен. В чем может заключаться причина этого поведения? 
<br/> 
<pre><code class="javascript">let tabsBtn = document.querySelectorAll('.projects__tabs-item'),
tabsItem = document.querySelectorAll('.modals__cards-item'),
projectArrows = document.querySelector('.modals__slider-arrows'),
modalItem = document.querySelector('.modals');
function projectSlider(){
    tabsItem.forEach(item =&gt; {
        if(item.classList.contains('modals-active')){
            console.log('ok');
        }else{
            console.log('no');
        }
    }) 
}

projectSlider();</code></pre> 
<br/>

9 ноября 2024 г. 11:53

Ответы на вопрос 1

Похожие вопросы

Answer 1

Проблема, с которой вы сталкиваетесь, может быть связана с тем, что класс `modals-active` на самом деле не добавляется к элементам во время вызова функции `projectSlider()`. Давайте разберем несколько причин, почему это может происходить:

1. **Неправильный момент вызова функции:** Убедитесь, что `projectSlider()` вызывается после того, как элементам был добавлен класс `modals-active`. Если функция вызывается сразу, когда страница загружается, класс, возможно, еще не был добавлен, поскольку событие, которое добавляет класс (например, нажатие на кнопку), еще не произошло.

2. **Проблемы с выбором элементов:** Убедитесь, что вы правильно выбираете элементы, на которые хотите повесить класс `modals-active`. Например, если классы не добавляются на элементы, которые вы проверяете, то код будет всегда выводить "no".

3. **Асинхронные действия:** Если вы добавляете класс в асинхронном процессе (например, после нажатия клавиши или изменения состояния), возможно, вам нужно ждать завершения этого процесса, прежде чем проверять наличие класса.

Попробуйте следующее:

- Вызывайте `projectSlider()` в момент, когда класс `modals-active` точно добавлен к элементам. Например, после события клика.
- Если класс добавляется в ответ на асинхронное действие, вы можете использовать `setTimeout()` для задержки проверки (хотя это не самый лучший подход), или лучше пересмотрите логику работы с событиями.

Пример может выглядеть так:

```javascript
tabsBtn.forEach((btn) => {
    btn.addEventListener('click', () => {
        // Здесь добавьте логику, которая добавляет класс 'modals-active'
        
        // После добавления класса вызывайте функцию
        projectSlider();
    });
});
```

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