I'm trying to make an interactive mall map. JS code works correctly on hover. But I need to add on click as well. That is, to work the same way when hovering and clicking on the menu.
Here is the JS code:
//map
var id = 0;
$(' .scheme-about__item .menu__link').mouseover(function(e) {
id = $(this).attr('data-id');
if(isMobile()) {
$('.area-m-' + id).addClass('hover');
} else {
$('.area-' + id).addClass('hover');
}
console.log($('.area-' + id));
})
.mouseout(function(e) {
if(isMobile()) {
$('.area-m-' + id).removeClass('hover');
} else {
$('.area-' + id).removeClass('hover');
}
});
function isMobile() {
var res = navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile|Windows Phone|PlayBook|BB10|Nokia/i);
if (res != null)
return true;
else
return false;
}
You can try this one.
//map
let id = 0;
let menuLink = document.querySelector('.scheme-about__item .menu__link');
menuLink.addEventListener('click',mapFunction);
menuLink.addEventListener('mouseover',mapFunction);
menuLink.addEventListener('mouseout',mapFunction);
function mapFunction(e){
id = e.target.getAttribute('data-id');
if(isMobile()) {
document.querySelector('.area-m-' + id).classList.add('hover');
} else {
document.querySelector('.area-' + id).classList.add('hover');
}
console.log(document.querySelector('.area-' + id)
}
function isMobile() {
var res = navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile|Windows Phone|PlayBook|BB10|Nokia/i);
if (res != null)
return true;
else
return false;
}