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

您可以使用import 'rxjs/add/observable/of'; auth(fallback): Observable<boolean> { return this.http.get(environment.API_URL + '/user/profile', { withCredentials: true }) .map(() => true).catch(() => { fallback(); return Observable.of(false); });}关键字来引用引发该事件的this元素。从那里你可以遍历DOM以找到子.vid元素，如下所示：

.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;
}

Answer 2

是的，因为File "/usr/local/lib/python2.7/shelve.py", line 223, in __init__ Shelf.__init__(self, anydbm.open(filename, flag), protocol, writeback) File "/usr/local/lib/python2.7/anydbm.py", line 85, in open return mod.open(file, flag, mode) error: (13, 'Permission denied')是一个需要作用域的选择器。试试这个：

.text

这会将属性仅添加到基础$('.vid').mouseenter(function() { $(this).find('.text').css("visibility","visible"); });元素。

Answer 3

这可以帮助您使用多个div：

$(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>

希望这有帮助！

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

3 个答案: