在不同图像上应用相同代码的最佳方法?jQuery

Question

这是我的html代码：

<div class="col-lg-2 vid">
        <img src="http://img.youtube.com/vi/hYj-XtJXGbs/maxresdefault.jpg"  class="img-responsive "  data-toggle="modal" data-target="#vid1">
        <p class="text">Text that comes over the image</p>
</div>

jQuery代码：

$('.vid').mouseenter(function() {
  $('.text').css("visibility","visible");
});

现在，如果我想添加另一个图像，但是使用相同的代码和类，该怎么办？显然，当我这样做时，这两个图像都会显示他们的覆盖文本，而我的鼠标仅在1个图像上。

那么，无论如何都可以这样做而不给每个图像一个不同的类/ID？

Answer 1

您可以使用this关键字来引用提出事件的.vid元素。从那里，您可以穿越DOM以找到孩子.text元素，例如：

$('.vid').mouseenter(function() {
  $(this).find('.text').css("visibility", "visible");
});

.vid {
  position: relative;
}
.vid p {
  position: absolute;
  width: 100%;
  top: 10%;
  visibility: hidden;
  color: #C00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-2 vid">
  <img src="http://img.youtube.com/vi/hYj-XtJXGbs/maxresdefault.jpg" class="img-responsive " data-toggle="modal" data-target="#vid1">
  <p class="text">Text that comes over the image</p>
</div>

Answer 2

是的，因为.text是需要范围的选择器。改用此方法：

$('.vid').mouseenter(function() {
  $(this).find('.text').css("visibility","visible");
});

这将仅将属性添加到基础.text元素中。

Answer 3

这可以帮助您进行多个Divs：

$(function() {
  $('.vid').on('mouseenter', function() {
    $(this).find('.text').css("visibility","visible");
  });
  
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-2 vid">
        <img src="http://img.youtube.com/vi/hYj-XtJXGbs/maxresdefault.jpg"  class="img-responsive "  data-toggle="modal" data-target="#vid1">
        <p class="text">Text that comes over the image</p>
</div>
<div class="col-lg-2 vid">
        <img src="http://img.youtube.com/vi/hYj-XtJXGbs/maxresdefault.jpg"  class="img-responsive "  data-toggle="modal" data-target="#vid2">
        <p class="text">Text that comes over the image</p>
</div>
<div class="col-lg-3 vid">
        <img src="http://img.youtube.com/vi/hYj-XtJXGbs/maxresdefault.jpg"  class="img-responsive "  data-toggle="modal" data-target="#vid1">
        <p class="text">Text that comes over the image</p>
</div>

希望这会有所帮助！