I have 5 images inside a div, none of this with id as they′re dynamically generated, so i need to make visible one and invisible the others, while the mouse moves around the image on visible. I have some of this working:
t
<div class="imgr" class="imgdiv" style="border: orange;width: 50%; height: auto; border-style: solid;" >
<img src="./img/9.png" alt="" class="roll" style="width: 100%;position: relative;height:100%; display: none" >
<img src="./img/10.png" alt="" class="roll" style="width: 100%;position: relative; display: block" >
<img src="./img/11.png" alt="" class="roll" style="width: 100%;position: relative; display: none" >
<img src="./img/12.png" alt="" class="roll" style="width: 100%;position: relative; display: none" >
</div>
The jquery:
$(document).ready(function() {
$('img').on("mousemove", function(e)
{
var offset = $(this).offset();
// console.log($(this)[0].parentElement);
d=$(this)[0];
console.log("pid:"+d.parentElement);
var X = (e.pageX - offset.left);
var Y = (e.pageY - offset.top);
// console.log($(this)[0].id)
// console.log(e);
// ]$('#coord').text('X: ' + X + ', Y: ' + Y);
l=$(this)[0].clientWidth;
//console.log("l:"+l);
l0=0;
l1=l*0.2;
l2=l*0.4;
l3=l*0.6;
l4=l*0.8;
if(X>l0 && X<l1){
if(CurrImg!=0)
{
CurrImg=0;
globalVariable++;
console.log(globalVariable);
console.log("Imagen0");
}
}
if(X>l1 && X<l2){
if(CurrImg!=1)
{
CurrImg=1;
globalVariable++;
console.log(globalVariable);
console.log("Imagen1");
}
}
if(X>l2 && X<l3){
if(CurrImg!=2)
{
CurrImg=2;
globalVariable++;
console.log(globalVariable);
console.log("Imagen2");
}
}
if(X>l3 && X<l4){
if(CurrImg!=3)
{
CurrImg=3;
globalVariable++;
console.log(globalVariable);
console.log("Imagen3");
}
}
if( X>l4){
if(CurrImg!=4)
{
CurrImg=4;
globalVariable++;
console.log(globalVariable);
console.log("Imagen4");
}
}
});
});
with the $(this)[0].parentElement i get the div and all the content, but i was unable to get the image that is visible and set it display:none and set the other one to visible. how can i achieve this ?
question from:
https://stackoverflow.com/questions/65841652/how-can-i-get-all-the-img-child-of-current-image-inside-a-div 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…