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>