Javascript 获取具有相同类的元素的id

我有多个带有类

printPic

的div框，这些div框将有自己的唯一id。在鼠标悬停在in/out位置时，切换

printPicOverlay

的显示，它是

printPic

的子项。按照我现在设置的方式，所有ID的

printPicOverlay

都在悬停状态下切换

对于每个id，悬停时显示/隐藏

printPicOverlay

的最佳方式是什么

$（.printPic”）.hover（函数（）{
$（“.printPicOverlay”）.toggle（）；
}，函数（）{
$（“.printPicOverlay”）.toggle（）；
});
.printPic{
高度：10公分；
宽度：10em；
显示：内联块；
背景：红色；
位置：相对位置；
}
.printPicOverlay{
身高：100%；
宽度：100%；
背景：rgba（0,0,0,0.4）；
显示：无；
位置：绝对位置；
}

您可以使用
$（this）.find（）
与下面类似

jQuery所做的是通过指定的选择器
.printPicOverlay
获取所有子体，并仅切换那些匹配的元素

使用
$（this）
将仅使用当前悬停在元素上的上下文


$（.printPic”）.hover（函数（）{
$（this.find（“.printPicOverlay”）.toggle（）；
}，函数（）{
$（this.find（“.printPicOverlay”）.toggle（）；
});
.printPic{
高度：10公分；
宽度：10em；
显示：内联块；
背景：红色；
位置：相对位置；
}
.printPicOverlay{
身高：100%；
宽度：100%；
背景：rgba（0,0,0,0.4）；
显示：无；
位置：绝对位置；
}

改为使用，与
$（this.find（）
类似：

$(this).find(".printPicOverlay").toggle();

请看下面的代码片段：


$（.printPic”）.hover（函数（）{
$（this.find（“.printPicOverlay”）.toggle（）；
}，函数（）{
$（this.find（“.printPicOverlay”）.toggle（）；
});
.printPic{
高度：10公分；
宽度：10em；
显示：内联块；
背景：红色；
位置：相对位置；
}
.printPicOverlay{
身高：100%；
宽度：100%；
背景：rgba（0,0,0,0.4）；
显示：无；
位置：绝对位置；
}
只需添加另一个备选方案–这在纯CSS中非常容易，无需任何Javascript/JQuery：


.printPic{
高度：10公分；
宽度：10em；
显示：内联块；
背景：红色；
位置：相对位置；
}
.printPicOverlay{
身高：100%；
宽度：100%；
背景：rgba（0,0,0,0.4）；
显示：无；
位置：绝对位置；
}
.printPic:hover.printPicOverlay{
显示：块；
}
问题是因为需要使用
this
关键字来
find（）
悬停的
.printPic
中的
.printPicOverlay
元素，如下所示：


$（“.printPic”）.hover（函数（）{
$（this.find（“.printPicOverlay”）.toggle（）；
});
.printPic{
高度：10公分；
宽度：10em；
显示：内联块；
背景色：红色；
位置：相对位置；
}
.printPicOverlay{
身高：100%；
宽度：100%；
背景色：rgba（0,0,0,0.4）；
显示：无；
位置：绝对位置；
}


只是一种不同的方法；我宁愿只使用@helb的CSS

当你已经越过了元素；通过切换，您可以实现您的目标。如果你愿意的话，可以用一点动画。
$（函数（）{
$（“.printPic”）.hover（函数（）{
$（'#'+$（this.attr（'id'）+'>div'）.toggle（100）；
});
});
.printPic{
高度：10公分；
宽度：10em；
显示：内联块；
背景：红色；
位置：相对位置；
}
.printPicOverlay{
身高：100%；
宽度：100%；
背景：rgba（0,0,0,0.4）；
显示：无；
位置：绝对位置；
}

类似于$（“#someID”）.find（“.printPicOverlay”）；
$('#' + $(this).attr('id') + '> div').toggle(100);// with little animation