проверка url на наличии якоря и сравнение с id

Question

Есть ресторан с меню. У карточки блюд есть id. Задача - переходим в меню ресторана по ссылке с якорем и данное блюдо подсвечивается. Т.е. я проверяю ссылку на наличие якоря. Затем проверяю anchor(якорь ссылки) соответствует регулярному выражению anchor_ЛЮБОЕКОЛИЧЕСТВОЦИФР_dish, как в ID блюда. Если соответствует, подсвечиваю блюдо. Вот мой код:

var Anchor = $(location).attr('hash'),
        idFood = $('#'+ Anchor);
    if (Anchor.match(/anchor_\d+_dish/i)) {
        idFood.css('outline', '3px solid #9cc95b');
    }else {
        idFood.css('outline', 'none');
    };`

Все работает. Но если меняется ссылка, например "/link#categoray"(внутри данной страницы без перезагрузки), эта часть кода не срабатывает

else {
        idFood.css('outline', 'none');
    };`

я так понимаю, что это из-за hash? Можете подсказать как можно переделать?

Answer 1

const foo = () => {
    const { hash } = location
    console.log('hashchange', { hash })
}
window.addEventListener('hashchange', foo)
window.addEventListener('load', foo)

<a href="#1">1</a><br>
<a href="#2">2</a><br>
<a href="#3">3</a><br>

БЛОГ НА HUSL

проверка url на наличии якоря и сравнение с id

Ответы (1 шт):