I got a code in Jquery and need it in pure javascript. Could you help me to translate this same code in pure javascript ? I've let the comments to make it easier.
ORIGINAL JQUERY CODE:
// when DOM's ready
$(document).ready(function() {
const linkTextArr = [];
// for each filter button
$('.navlink_button').each((index, link) => {
// get its text content and reformat to a valid ID
let linkText = $(link).text().replace(/\W/g,'_').toLowerCase();
// set the reformatted linkText as the link href attribute
$(link).attr('href', '#'+linkText);
// push reformatted linkText to array
linkTextArr.push(linkText);
});
// for each section
$('.hack4-cms-anchor-section').each((index, section) => {
$(section).attr('id', linkTextArr[index]);
});
// set up intrsection observer
let observer = new IntersectionObserver((entries, observer) => {
// for each anchor section
entries.forEach(entry => {
// if it's in the viewport
if(entry.isIntersecting){
$('.navlink_button.hack4-active').removeClass('hack4-active');
$(`.navlink_button[href='#${entry.target.id}']`).addClass('hack4-active');
}
});
// set thrshld to 1 ensures the whole anchor section
// is in viewport before adding active class to active link
}, {threshold: 0});
// start intersection observer for each anchor section
$('.hack4-cms-anchor-section').each((i,sec) => observer.observe(sec) );
});
I tried to translate it like this, by replacing all the selectors:
// when DOM's ready
document.addEventListener('DOMContentLoaded', () => {
// create empty array that will store link text strings
const linkTextArr = [];
// for each filter button
document.querySelectorAll('.navlink_button').each((index, link) => {
// get its text content and reformat to a valid ID
let linkText = document.querySelector(link).text().replace(/\W/g,'_').toLowerCase();
// set the reformatted linkText as the link href attribute
document.querySelector(link).attr('href', '#'+linkText);
// push reformatted linkText to array
linkTextArr.push(linkText);
// console.log(linkText);
});
// for each section
// ex: hellosign > hellosign
document.querySelectorAll('.hack4-cms-anchor-section').each((index, section) => {
// set id attribute to linkTextArray value sequentially
// 1st section gets id: linkTextArr[0]
// 2nd section gets id: linkTextArr[1] and so on
document.querySelectorAll(section).attr('id', linkTextArr[index]);
});
// set up intrsctn obsrvr
// (navlnk btn highlight when on sectn)
// 2 observ whn th anchor sectns ar in viewport
let observer = new IntersectionObserver((entries, observer) => {
// for each anchor section
entries.forEach(entry => {
// if it's in the viewport
if(entry.isIntersecting){
// remov l'active class from current active link
document.querySelector('.navlink_button.hack4-active').removeClass('hack4-active');
// add the active class to the current active link
document.querySelector(`.navlink_button[href='#${entry.target.id}']`).addClass('hack4-active');
}
});
// set thrshld to 1 ensures the whole anchor section
// is in viewport before adding active class to active link
// this part ', {threshold: 1}' is optional
}, {threshold: 0});
// start intersection observer for each anchor section
document.querySelectorAll('.hack4-cms-anchor-section').each((i,sec) => observer.observe(sec) );
});
But I don't know how to translate this line with this #${ :
$(`.navlink_button[href='#${entry.target.id}']`).addClass('hack4-active');
after that can you tell me if there something else that is still jQuery on my translation ?