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

Question

我有多个带有类名 printPic 的 div 盒子，它们拥有各自独特的 id。在鼠标悬停/移出时，切换显示 printPic 的子元素 printPicOverlay。目前的设置方式是，在鼠标悬停时，所有 id 的 printPicOverlay 都会被切换。

如何才能在鼠标悬停时单独为每个 id 显示/隐藏 printPicOverlay 呢？

$(".printPic").hover(function () {
$(".printPicOverlay").toggle();
}, function () {
$(".printPicOverlay").toggle();
});

.printPic{
  height: 10em;
  width: 10em;
  display: inline-block;
  background: red;
  position: relative;
}

.printPicOverlay{
  height: 100%;
  width: 100%;
  background: rgba(0,0,0,0.4);
  display: none;
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "printPic" id = "1">
  <div class = "printPicOverlay"></div>
</div>

<div class = "printPic" id = "2">
  <div class = "printPicOverlay"></div>
</div>

<div class = "printPic" id = "3">
  <div class = "printPicOverlay"></div>
</div>

- Jaxon Crosmas

---

类似于$("#someID").find(".printPicOverlay"); - ControlAltDel

Answer 1

只需添加另一种替代方法 - 这在纯CSS中非常容易，而无需任何Javascript / JQuery：

.printPic {
  height: 10em;
  width: 10em;
  display: inline-block;
  background: red;
  position: relative;
}

.printPicOverlay {
  height: 100%;
  width: 100%;
  background: rgba(0,0,0,0.4);
  display: none;
  position: absolute;
}

.printPic:hover .printPicOverlay {
  display: block;
}

<div class="printPic" id="1">
  <div class="printPicOverlay"></div>
</div>

<div class="printPic" id="2">
  <div class="printPicOverlay"></div>
</div>

<div class="printPic" id="3">
  <div class="printPicOverlay"></div>
</div>

使用本地浏览器功能而不是通过jQuery查找元素，可能会更加高效。

伪类 :hover 文档

如果您想要动画效果的遮罩层出现，需要进行一些微调（例如使用visibility而不是display）：

.printPic {
  height: 10em;
  width: 10em;
  display: inline-block;
  background: red;
  position: relative;
}

.printPicOverlay {
  height: 100%;
  width: 100%;
  background: rgba(0,0,0,0.4);
  position: absolute;
  visibility: hidden;
  opacity: 0;
  transform: scale(0.8) translate(0, 10%);
  transition: visibility 0s, opacity 0.5s ease-in, transform 0.3s ease-in;
}

.printPic:hover .printPicOverlay {
  transform: scale(1);
  visibility: visible;
  opacity: 1;
}

<div class="printPic" id="1">
  <div class="printPicOverlay"></div>
</div>

<div class="printPic" id="2">
  <div class="printPicOverlay"></div>
</div>

<div class="printPic" id="3">
  <div class="printPicOverlay"></div>
</div>

- helb

Answer 2

不要使用 $(this)，而是使用 $(this).find()，如下：

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

请看下面的代码片段:

$(".printPic").hover(function () {
$(this).find(".printPicOverlay").toggle();
}, function () {
$(this).find(".printPicOverlay").toggle();
});

.printPic{
  height: 10em;
  width: 10em;
  display: inline-block;
  background: red;
  position: relative;
}

.printPicOverlay{
  height: 100%;
  width: 100%;
  background: rgba(0,0,0,0.4);
  display: none;
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "printPic" id = "1">
  <div class = "printPicOverlay"></div>
</div>

<div class = "printPic" id = "2">
  <div class = "printPicOverlay"></div>
</div>

<div class = "printPic" id = "3">
  <div class = "printPicOverlay"></div>
</div>

希望这能帮到你！

- Saurav Rastogi

Answer 3

你可以使用类似下面的 $(this).find()。jQuery 的 find 方法是通过指定选择器 .printPicOverlay 获取所有后代元素，然后仅切换匹配的元素。使用 $(this) 仅使用当前鼠标悬停元素的上下文。

$(".printPic").hover(function () {
  $(this).find(".printPicOverlay").toggle();
}, function () {
  $(this).find(".printPicOverlay").toggle();
});

.printPic{
  height: 10em;
  width: 10em;
  display: inline-block;
  background: red;
  position: relative;
}

.printPicOverlay{
  height: 100%;
  width: 100%;
  background: rgba(0,0,0,0.4);
  display: none;
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "printPic" id = "1">
  <div class = "printPicOverlay"></div>
</div>

<div class = "printPic" id = "2">
  <div class = "printPicOverlay"></div>
</div>

<div class = "printPic" id = "3">
  <div class = "printPicOverlay"></div>
</div>

- Nope

Answer 4

$('#' + $(this).attr('id') + '> div').toggle(100);// with little animation

我想采用一种不同的方法，更倾向于使用 @helb 的纯 CSS 方案。

While you already over the element ; and with toggling you can achieve your target. with little animation if you wish.

$(function(){
   $(".printPic").hover(function () {
      $('#' + $(this).attr('id') + '> div').toggle(100); 
   });
});

.printPic{
  height: 10em;
  width: 10em;
  display: inline-block;
  background: red;
  position: relative;
}

.printPicOverlay{
  height: 100%;
  width: 100%;
  background: rgba(0,0,0,0.4);
  display: none;
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "printPic" id = "1">
  <div class = "printPicOverlay"></div>
</div>

<div class = "printPic" id = "2">
  <div class = "printPicOverlay"></div>
</div>

<div class = "printPic" id = "3">
  <div class = "printPicOverlay"></div>
</div>

- wpcoder

Answer 5

问题出在您需要使用 this 关键字来在悬停的 .printPic 中查找 .printPicOverlay 元素，像这样：

$(".printPic").hover(function() {
  $(this).find(".printPicOverlay").toggle();
});

.printPic {
  height: 10em;
  width: 10em;
  display: inline-block;
  background-color: red;
  position: relative;
}

.printPicOverlay {
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  display: none;
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="printPic" id="1">
  <div class="printPicOverlay"></div>
</div>
<div class="printPic" id="2">
  <div class="printPicOverlay"></div>
</div>
<div class="printPic" id="3">
  <div class="printPicOverlay"></div>
</div>

然而，仅使用CSS实现这一点会更好，更简单。根本不需要JS：

.printPic {
  height: 10em;
  width: 10em;
  display: inline-block;
  background-color: red;
  position: relative;
}

.printPicOverlay {
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  display: none;
  position: absolute;
}

.printPic:hover .printPicOverlay {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="printPic" id="1">
  <div class="printPicOverlay"></div>
</div>
<div class="printPic" id="2">
  <div class="printPicOverlay"></div>
</div>
<div class="printPic" id="3">
  <div class="printPicOverlay"></div>
</div>

- Rory McCrossan