jQuery hover not working when no second image available

问题: So I've blocks of image container, once I hover on any 1 container then hover is working. But when the hover image is not available, then the image flickering is happening....

问题:

So I've blocks of image container, once I hover on any 1 container then hover is working. But when the hover image is not available, then the image flickering is happening. Below is my code:

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>

回答1:

The issue is because your if statement is looking at a jQuery object and hence always returns true. Therefore the event is applied to all elements.

You can fix the problem and improve the logic by removing the if condition and using the attribute selector to only select the elements which have a data attribute with a valid value. Also note that global variables should be avoided, which you can achieve in this case by having another data attribute to hold the src to use for the image when the mouseleave event happens. Try this:

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

If you are unable to amend the HTML, then you could still use a dynamically created data attribute, like this:

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>

  • 发表于 2019-02-17 05:45
  • 阅读 ( 230 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除