Any chance to make a loop with this code?-CodePudding

I have section in my html page where i put 9 images which displays dependingly on X mouse position (clientX). All works fine, but the only way i could code it its incredibly long and non-otpimal. Im sure it can be done more optimal by using loop or forEach method, but my skills not allow me to. Do you have any suggestions?

   const fotos = [...document.getElementsByClassName('mousemovefoto')];
   const startfoto = document.querySelector('.startfoto');

   window.addEventListener('mousemove', function (event) {

const x = event.clientX;


if (x < 211) {
    startfoto.style.display = 'inline-block'
    fotos[0].style.display = 'none'
} else if (x >= 211 && x < 422) {
    fotos[0].style.display = "inline-block"
    fotos[1].style.display = 'none'
    startfoto.style.display = 'none'
}  else if (x >= 422 && x < 633) {
    fotos[1].style.display = 'inline-block'
    fotos[0].style.display = "none"
    fotos[2].style.display = "none"
    startfoto.style.display = 'none'
} else if (x >= 633 && x < 844) {
    fotos[2].style.display = 'inline-block'
    fotos[1].style.display = 'none'
    fotos[0].style.display = "none"
    startfoto.style.display = 'none'
    fotos[3].style.display = 'none'
} else if (x >= 844 && x < 1055) {
    fotos[3].style.display = 'inline-block'
    fotos[2].style.display = 'none'
    fotos[1].style.display = 'none'
    fotos[0].style.display = "none"
    fotos[4].style.display = 'none'
    startfoto.style.display = 'none'
} else if (x >= 1055 && x < 1266) {
    fotos[4].style.display = 'inline-block'
    fotos[3].style.display = 'none'
    fotos[2].style.display = 'none'
    fotos[1].style.display = 'none'
    fotos[0].style.display = "none"
    fotos[5].style.display = "none"
    startfoto.style.display = 'none'
}  else if (x >= 1266 && x < 1477) {
    fotos[5].style.display = 'inline-block'
    fotos[4].style.display = 'none'
    fotos[3].style.display = 'none'
    fotos[2].style.display = 'none'
    fotos[1].style.display = 'none'
    fotos[0].style.display = "none"
    fotos[6].style.display = "none"
    startfoto.style.display = 'none'
}  else if (x >= 1477 && x < 1688) {
    fotos[6].style.display = 'inline-block'
    fotos[5].style.display = 'none'
    fotos[4].style.display = 'none'
    fotos[3].style.display = 'none'
    fotos[2].style.display = 'none'
    fotos[1].style.display = 'none'
    fotos[0].style.display = "none"
    fotos[7].style.display = "none"
    startfoto.style.display = 'none'
} else if (x >= 1688 && x < 3000) {
    fotos[7].style.display = 'inline-block'
    fotos[6].style.display = 'none'
    fotos[5].style.display = 'none'
    fotos[4].style.display = 'none'
    fotos[3].style.display = 'none'
    fotos[2].style.display = 'none'
    fotos[1].style.display = 'none'
    fotos[0].style.display = "none"
    startfoto.style.display = 'none' 
}
})

I was trying this without all

fotos[x].style.display = "none"

but without it when foto is changing, previous foto goes under and i have 9 photos under each other on site.

I was also trying to add css class

.active {
display: inline-block;
}

and add/remove it with mouse move, but fotos were also displaying under each other after changing.

Do you have any suggestions?

CodePudding user response：

const fotos = [...document.getElementsByClassName('mousemovefoto')];
   const startfoto = document.querySelector('.startfoto');

   window.addEventListener('mousemove', function (event) {

const x = event.clientX;

let p = Math.trunc(x/211)

if (p == 0) {
   startfoto.style.display = 'inline-block'
   fotos[0].style.display = 'none'
}else startfoto.style.display = 'none'

for (let i = 0; i < p ; i  ){
    fotos[i].style.display = 'none'
}
fotos[p-1].style.display='inline-block'
  


})

CodePudding user response：

Since it seems you are using equal distance bins (of 211), you can turn it into a loop like this

const binWidth = 211;
const k = Math.floor((x - binWidth) / binWidth);
if (k < 0) {
    // k < 0 when x < 211
    startfoto.style.display = 'inline-block'
    fotos[0].style.display = 'none'
} else {
    // k = 0, 1, 2, 3... 7 (when x >= 1688)
    for (let i = k   1; i >= 0; i--) {
        if (i < fotos.length) {
            fotos[i].style.display = 'none';
        }
    }
    fotos[k].style.display = 'inline-block';
    startfoto.style.display = 'none';
}