Как сделать так что бы data атрибут работал на несколько элементов?

Question

Как сделать так что бы data атрибут работал на несколько элементов?

Рейтинг: 0Ответов: 1Опубликовано: 12.05.2023

есть код мультиязычного сайта, и я попытался реализовать смену языка через data атребут но столкнулся с проблемой что он переводит только один элемент(в одино <p></p> текст переводит, ставишь в следующий тот же data атрибут так как одинаковый текст и уже не переводит) вот js код:

const langButtons = document.querySelectorAll("[data-btn]");
const allLangs = ["ru", "ua", "en", "eo"];
const currentPathName = window.location.pathname;
let currentLang =
    localStorage.getItem("language") || checkBrowserLang() || "ru";
let currentTexts = {};

// Проверка пути страницы сайта
function checkPagePathName() {
    switch (currentPathName) {
        case "/index.html":
            currentTexts = homeTexts;
            break;
        case "/another_page.html":
            currentTexts = anotherTexts;
            break;

        default:
            currentTexts = homeTexts;
            break;
    }
}
checkPagePathName();

// Изменение языка у текстов
function changeLang() {
    for (const key in currentTexts) {
        let elem = document.querySelector(`[data-lang=${key}]`);
        if (elem) {
            elem.textContent = currentTexts[key][currentLang];
        }
    }
}
changeLang();

// Вешаем обработчики на каждую кнопку
langButtons.forEach((btn) => {
    btn.addEventListener("click", (event) => {
        if (!event.target.classList.contains("header__btn_active")) {
            currentLang = event.target.dataset.btn;
            localStorage.setItem("language", event.target.dataset.btn);
            resetActiveClass(langButtons, "header__btn_active");
            btn.classList.add("header__btn_active");
            changeLang();
        }
    });
});

// Сброс активного класса у переданного массива элементов
function resetActiveClass(arr, activeClass) {
    arr.forEach((elem) => {
        elem.classList.remove(activeClass);
    });
}

// Проверка активной кнопки
function checkActiveLangButton() {
    switch (currentLang) {
        case "ru":
            document
                .querySelector('[data-btn="ru"]')
                .classList.add("header__btn_active");
            break;
        case "en":
            document
                .querySelector('[data-btn="en"]')
                .classList.add("header__btn_active");
            break;
        case "ua":
            document
                .querySelector('[data-btn="de"]')
                .classList.add("header__btn_active");
            break;
            case "eo":
                document
                    .querySelector('[data-btn="eo"]')
                    .classList.add("header__btn_active");
                break;

        default:
            document
                .querySelector('[data-btn="ru"]')
                .classList.add("header__btn_active");
            break;
    }
}
checkActiveLangButton();

// Проверка языка браузера
function checkBrowserLang() {
    const navLang = navigator.language.slice(0, 2).toLowerCase();
    const result = allLangs.some((elem) => {
        return elem === navLang;
    });
    if (result) {
        return navLang;
    }
}

console.log("navigator.language", checkBrowserLang());

<header>
<nav>
            <button class="header_btn header_btn_active flag1" data-btn="ru">RU</button>
            <button class="header_btn header_btn_active flag2" data-btn="eo">EO</button>
            <button class="header_btn header_btn_active flag3" data-btn="ua">UA</button>
            <button class="header_btn header_btn_active flag4" data-btn="en">EN</button>
        </nav>
    </header>
    <main>
        <div class="box">
            <a href="page/series/Lie_to_me/index.html"><img src="assets/img/01.webp" class="photo"></a>
            <div class="txt">
                <h2>Обмани мене</h2>
                <h5><i><a href="page/type/serial/index.html" class="hash1" data-lang="type_series">Серіал</a>/2009-2011/<span data-lang="country">США</span></i></h5>
                <p class="hash" data-lang="genre"><b>Жанри:</b> <a href="page/genre/drama.html" class="hash1">Драма, </a><a href="page/genre/crime.html" class="hash1">Кримінал, </a><a href="page/genre/detective.html" class="hash1">Детектив</a></p>
            </div>
        </div>
        <div class="box">
            <a href="page/movie/The_Man_from_U.N.C.L.E/index.html"><img src="assets/img/02.webp" class="photo"></a>
            <div class="txt">
                <div class="txt">
                    <h2>Агенти А.Н.К.Л.</h2>
                    <h5><i><a href="page/type/movie/index.html" class="hash1" data-lang="type_movie">Фільм</a>/2015/<span data-lang="country">США</span></i></h5>
                    <p class="hash" data-lang="genre"><b>Жанри:</b> <a href="page/genre/action.html" class="hash1">Бойовик, </a><a href="page/genre/comedy.html" class="hash1">Комедія, </a><a href="#" class="hash1">Пригоди</a></p>
                </div>
            </div>
        </div>

Подскажите, как быть в этой ситуации?

javascript html

Источник: Stack Overflow на русском

Answer 1

▲ 2Принят

Примерно так:

// Изменение языка у текстов
function changeLang() {
    for (const key in currentTexts) {
        let list = document.querySelectorAll(`[data-lang=${key}]`);
        list.forEach((elem)=>{
            elem.textContent = currentTexts[key][currentLang];
        });
    }
}

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

Как сделать так что бы data атрибут работал на несколько элементов?

Ответы