Question

我正在使用jQuery和data-attribute创建一个悬停效果。

所以我做的是我在每个图像上放置了一些数据属性，然后通过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');
    });
});

有什么想法吗？

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

Answer 2

＆＃13;

    $(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);
      });
    });

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

将当前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);
        });
    });

<强> Updated Fiddle

Answer 4

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

$(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'));
    });
});

DEMO

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

jQuery悬停功能

5 个答案: