javascript - 当没有第二张图片可用时，jQuery 悬停不起作用

Question

所以我有图像容器 block ，一旦我将鼠标悬停在任何 1 个容器上，悬停就会起作用。但是当悬停图像不可用时，就会发生图像闪烁。下面是我的代码:

if ($('.clp-hover-img[data-src!="null"]')) {
    var tempSrc = '';
    $(".clp-hover-img").hover(function () {
        tempSrc = $(this).attr('src');
        $(this).attr("src", $(this).data("src"));
    }, function () {
        $(this).attr("src", tempSrc);
    });
}

img {
    width: 200px;
    height: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="one">
    <img class="tile-image clp-hover-img" alt="Cotton Sateen Bottom Sheet" title="Cotton Sateen Bottom Sheet"
        itemprop="image" data-src="https://images.pexels.com/photos/1640769/pexels-photo-1640769.jpeg"
        src="https://images.pexels.com/photos/735621/pexels-photo-735621.jpeg">
</div>

<div class="two">
    <img class="tile-image clp-hover-img" alt="Cotton Sateen Bottom Sheet" title="Cotton Sateen Bottom Sheet"
        itemprop="image" data-src="null" src="https://images.pexels.com/photos/1640769/pexels-photo-1640769.jpeg">
</div>

<div class="three">
    <img class="tile-image clp-hover-img" alt="Cotton Sateen Bottom Sheet" title="Cotton Sateen Bottom Sheet"
        itemprop="image" data-src="null" src="https://images.pexels.com/photos/1890420/pexels-photo-1890420.jpeg">
</div>

Answer 1

问题是因为您的 if 语句正在查看 jQuery 对象，因此总是返回 true。因此，该事件适用于所有元素。

您可以通过删除 if 条件并使用属性选择器仅选择具有有效值的 data 属性的元素来解决问题并改进逻辑.另请注意，应避免使用全局变量，在这种情况下，您可以通过使用另一个 data 属性来保存 src 以在 mouseleave 时用于图像 事件发生。试试这个:

$('.clp-hover-img[data-hover-src!="null"]').hover(function() {
  $(this).attr('src', function() {
    return $(this).data('hover-src')
  })
}, function() {
  $(this).attr('src', function() {
    return $(this).data('src')
  })
});

img {
  width: 200px;
  height: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="one">
  <img class="tile-image clp-hover-img" alt="Cotton Sateen Bottom Sheet" title="Cotton Sateen Bottom Sheet" itemprop="image" data-hover-src="https://images.pexels.com/photos/1640769/pexels-photo-1640769.jpeg" data-src="https://images.pexels.com/photos/735621/pexels-photo-735621.jpeg" src="https://images.pexels.com/photos/735621/pexels-photo-735621.jpeg">
</div>

<div class="two">
  <img class="tile-image clp-hover-img" alt="Cotton Sateen Bottom Sheet" title="Cotton Sateen Bottom Sheet" itemprop="image" data-hover-src="null" data-src="https://images.pexels.com/photos/1640769/pexels-photo-1640769.jpeg" src="https://images.pexels.com/photos/1640769/pexels-photo-1640769.jpeg">
</div>

<div class="three">
  <img class="tile-image clp-hover-img" alt="Cotton Sateen Bottom Sheet" title="Cotton Sateen Bottom Sheet" itemprop="image" data-hover-src="null" data-src="https://images.pexels.com/photos/1890420/pexels-photo-1890420.jpeg" src="https://images.pexels.com/photos/1890420/pexels-photo-1890420.jpeg">
</div>

如果您无法修改 HTML，那么您仍然可以使用动态创建的 data 属性，如下所示:

var $imgs = $('.clp-hover-img[data-src!="null"]').each(function() {
  $(this).data('static-src', $(this).prop('src'));
});

$imgs.hover(function() {
  $(this).attr('src', function() {
    return $(this).data('src')
  })
}, function() {
  $(this).attr('src', function() {
    return $(this).data('static-src')
  })
});

img {
  width: 200px;
  height: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="one">
  <img class="tile-image clp-hover-img" alt="Cotton Sateen Bottom Sheet" title="Cotton Sateen Bottom Sheet" itemprop="image" data-src="https://images.pexels.com/photos/1640769/pexels-photo-1640769.jpeg" src="https://images.pexels.com/photos/735621/pexels-photo-735621.jpeg">
</div>

<div class="two">
  <img class="tile-image clp-hover-img" alt="Cotton Sateen Bottom Sheet" title="Cotton Sateen Bottom Sheet" itemprop="image" data-src="null" src="https://images.pexels.com/photos/1640769/pexels-photo-1640769.jpeg">
</div>

<div class="three">
  <img class="tile-image clp-hover-img" alt="Cotton Sateen Bottom Sheet" title="Cotton Sateen Bottom Sheet" itemprop="image" data-src="null" src="https://images.pexels.com/photos/1890420/pexels-photo-1890420.jpeg">
</div>