jQuery悬停函数

Question

我正在使用jQuery和数据属性创建悬停效果。

我在每个图像上放置了一些数据属性，然后通过jQuery访问它们并将它们存储在一个变量中。然后我通过jQuery访问它们来更改图像。然而，我不知道如何在“mouseout”时将其恢复到原始状态。

这是我的jQuery代码：

$(document).ready(function(){
    $('img').hover(function(){
        var s = $(this).attr('data-alt-src');
        $(this).attr('src', s);
    }, function(){
        $(this).attr('src');
    });
});

有什么想法吗？

- Kimberly Wright

Answer 1

尝试将原始src设置为其他属性，并在mouseleave时使用该属性。

 $(document).ready(function(){
    $('img').hover(function(){
        var s = $(this).attr('data-alt-src');            
        $(this).attr('orSrc',$(this).attr('src')).attr('src', s);
    }, function(){
        $(this).attr('src',$(this).attr('orSrc'));
    });
});

Demo

- Umesh Sehta

---

我可以问一个问题吗？为什么我们不能在$(document).ready(function(){})之前声明变量old？？？在var old src之上。- Kimberly Wright - Kimberly Wright

你能进一步解释为什么吗？ - Kimberly Wright

如果我在hover函数之上声明这整个东西：var original_src=$(this).attr('src');，那么当鼠标移开时它还能被访问吗？ - Kimberly Wright

不是因为 $(this) 指的是当前悬停的图片（即被悬停的图片），所以它会抛出一个错误。 - Umesh Sehta

Answer 2

将当前src存储为变量并使用它。

   var old="";
$(document).ready(function(){
        $('img').hover(function(){
            old=$(this).attr('src');
            var s = $(this).attr('data-alt-src');
            $(this).attr('src', s);
        }, function(){
            $(this).attr('src',old);
        });
    });

更新的 Fiddle

- Balachandran

---

我可以问一个问题吗？为什么我们不能在 $(document).ready(function(){}) 中声明变量 old？ - Kimberly Wright

Answer 3

    $(document).ready(function() {
      var src_original;
      $('img').hover(function() {
        src_original = $(this).attr('src');
        var s = $(this).attr('data-alt-src');
        $(this).attr('src', s);
      }, function() {
        $(this).attr('src', src_original);
      });
    });

img {
  cursor: pointer;
}
img:hover {
  opacity: 0.7;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <img src="http://goo.gl/osWLNm" data-alt-src='http://goo.gl/K5yFHa' />
  <img src="http://goo.gl/umj4bX" data-alt-src='http://goo.gl/bz4jQH' />
  <img src="http://goo.gl/W1fumF" data-alt-src='http://goo.gl/d4gynn' />
  <img src="http://goo.gl/wMb04Z" data-alt-src='http://goo.gl/LqZU0Q' />

</section>

- Muhammet

---

我可以问一个问题吗？为什么我们不能在var old src之上的$(document).ready(function(){})内声明变量old？ - Kimberly Wright

@KimberlyWright 它在 DOM 就绪内部声明，但如果您问为什么不在 hover 函数内部，它将无法在 mouseout 函数中使用，因为它是一个局部变量。 - Muhammet

所以我们需要先将它声明为空变量放在 hover 函数外面，然后在函数内部给它赋值，是吗？ - Kimberly Wright

Answer 4

使用.data()将原始图像src存储在缓存中。

$(document).ready(function () {
    $('img').hover(function () {
        var that = $(this);
        that.data('or-src', that.prop('src'))
        that.prop('src', that.data('alt-src'));
    }, function () {
        var that = $(this);
        $(this).prop('src', that.data('or-src'));
    });
});

演示

- Satpal

Answer 5

我添加了data-old-src来存储默认的img源并在鼠标移出时加载。

请查看https://jsfiddle.net/jzxh1asx/6/

HTML

  <section>
    <img src="http://goo.gl/osWLNm" data-old-src="http://goo.gl/osWLNm" data-alt-src='http://goo.gl/K5yFHa' />
    <img src="http://goo.gl/umj4bX" data-old-src="http://goo.gl/umj4bX" data-alt-src='http://goo.gl/bz4jQH' />
    <img src="http://goo.gl/W1fumF" data-old-src="http://goo.gl/W1fumF" data-alt-src='http://goo.gl/d4gynn' />
    <img src="http://goo.gl/wMb04Z" data-old-src="http://goo.gl/wMb04Z" data-alt-src='http://goo.gl/LqZU0Q' />
  </section>

JS

$(document).ready(function(){
    $('img').hover(function(){
        var s = $(this).attr('data-alt-src');
        $(this).attr('src', s);
    }, function(){
        var os = $(this).attr('data-old-src');
        $(this).attr('src', os);
    });
});

- Usman Arshad