使用 Jquery 重复悬停后更改悬停图像

Question

我正在尝试使用 jquery 更改 html 中 img 标签中的 src 属性，我希望 scr 属性根据用户悬停在 img 上的次数而有所不同元素.

我的html设置如下：

<img id="element" src="img1.png">

我的js/jQuery设置如下：

var count = 0;

if(count == 0){
        $("#element").hover(function(){
            count++;
            $("#element").attr("src","img2.png");
        }, function(){
            $("#element").attr("src","img1.png");
        });
} else if(count>=1){
        $("#element").hover(function(){
            count++;
            $("#element").attr("src","img3.png");
        }, function(){
            $("#element").attr("src","img1.png");
        });
}

悬停功能本身可以正常工作，悬停进出将在两个图像之间切换。但是，我的目标是让它在第一次悬停时切换到 img2，然后在第二次悬停时切换到 img3，此后。如果我希望它悬停在 img1 和 img2 或 img 1 和 img3 之间，我的悬停功能似乎工作正常，即当我删除 if 语句和计数变量时。

如果有人可以帮助确定我的问题。

Answer 1

根据您发布的内容，if(count == 0) 出现在您的设置代码中。 None 的悬停事件处理程序触及 count 的值，因此一旦设置了处理程序（设置为 1 和 2 或 1 和 3），它们将永远不会更改。由于添加处理程序时计数始终为零，因此您始终会得到第一对。

相反，您应该在处理程序函数内的两个图像之间切换，而不是在分配处理程序的代码中。

Answer 2

您需要在悬停处理程序中进行计数器检查

var counter = 0;
$("#element").hover(function() {
  $(this).attr("src", ++counter > 1 ? '//placehold.it/64X64/00ff00' : '//placehold.it/64X64/0000ff');
}, function() {
  $(this).attr("src", "//placehold.it/64X64/ff0000");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img id="element" src="//placehold.it/64X64/ff0000">

在您的代码中，counter 的值仅在页面加载时检查一次，其中计数器的值始终为 0

Answer 3

尝试创建包含 img src 的字符串数组，利用 Array.prototype.reverse() 切换图像

    var imgs = ["img2.png", "img3.png"];
    $("#element").hover(function() {
      $(this).attr("src", imgs[0]);
      imgs.reverse()
    }, function() {
      $(this).attr("src", "img1.png");
    });

    var imgs = ["http://lorempixel.com/100/100/sports", "http://lorempixel.com/100/100/cats"];
    $("#element").hover(function() {
      $(this).attr("src", imgs[0]);
      imgs.reverse()
    }, function() {
      $(this).attr("src", "http://lorempixel.com/100/100/nature");
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img id="element" width="100px" src="http://lorempixel.com/100/100/nature" />

Answer 4

简单一点怎么样？

var counter = 1;
$("#element").hover(function () {
    counter = (counter===3) ? 1 : (counter+1);
    $(this).attr("src", 'img'+counter+'.png');
}

Answer 5

不确定这是否适用于我查找的内容，但您可以尝试一下。只需向其中添加更多变量即可。

jQuery(document).ready(function($) {

//rollover swap images with rel

var img_src = "";
var new_src = "";

$(".rollover").hover(function(){
 //mouseover

img_src = $(this).attr('src'); //grab original image

new_src = $(this).attr('rel'); //grab rollover image

$(this).attr('src', new_src); //swap images

$(this).attr('rel', img_src); //swap images

},
function(){
//mouse out

$(this).attr('src', img_src); //swap images

$(this).attr('rel', new_src); //swap images
});

Answer 6

这个怎么样？

$(document).ready(function(){
    var count = 1;

    $("#element").hover(function() {

        count++;
       $(this).attr("src","img"+count+".png");

       if(count == 3){
        //Reset the count
        count = 0;
       }

    }, function() {
      $(this).attr("src", "img1.png");

    });
});

使用 Jquery 重复悬停后更改悬停图像

Changing hover image after repeated hovers using Jquery

html

javascript

jquery

hover