Доброго дня, делая учебный проект на основе пересечений блоков ( observerIntersection ), когда при скроллинге подсвечивается раздел оглавления , застопорился на том, что не могу совершить отборку определенного класса по атрибуту, значение которого генерируется в переменной, хотелось бы сделать это при помощи дата-атрибутов, имена и значения которых будут одинаковы (например: У Части-1 будет тот же дата-атрибут и значение, как у секции-1). По задумке: клацнув оглавление , пользователь должен плавно скролиться на соответствующий раздел, но у меня не получается отобрать нужную секцию по атрибуту, значение которого генерировалось бы в переменной test! С шаблонной строкой тоже не получилось, пожалуйста помогите!
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>Active-class-with-observer</title>
</head>
<body>
<nav class="nav-menu">
<ul class="nav-menu__list">
<li class="nav-menu__item" data-TOC="1">Часть 1</li>
<li class="nav-menu__item" data-TOC="2">Часть 2</li>
<li class="nav-menu__item" data-TOC="3">Часть 3</li>
<li class="nav-menu__item" data-TOC="4">Часть 4</li>
<li class="nav-menu__item" data-TOC="5">Часть 5</li>
</ul>
</nav>
<article class="section-list">
<section class="section section-1" data-TOC="1">Секция-1</section>
<section class="section section-2" data-TOC="2">Секция-2</section>
<section class="section section-3" data-TOC="3">Секция-3</section>
<section class="section section-4" data-TOC="4">Секция-4</section>
<section class="section section-5" data-TOC="5">Секция-5</section>
</article>
</body>
<script>
const sectionList = document.querySelectorAll('.section');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
document.querySelectorAll('.nav-menu__item').forEach((li) => {
li.classList.toggle('active', li.dataset.toc === entry.target.dataset.toc);
});
}
});
}
, {
threshold: 0.7
});
sectionList.forEach((section) => {
observer.observe(section)
});
document.querySelector('.nav-menu').addEventListener('click', (event) => {
if (event.target.classList.contains('nav-menu__item')) {
let test = event.target.dataset.toc;
console.log(test);
window.scrollTo({
top: document.querySelector('.section[data-TOC="test"]').offsetTop, // <-- проблема здесь
behavior: 'smooth',
});
}
});
</script>
</html>
