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

【问题标题】：Changing hover image after repeated hovers using Jquery使用 Jquery 重复悬停后更改悬停图像
【发布时间】：2015-09-09 02:54:46
【问题描述】：

我的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，然后再切换到 img3。如果我希望它在 img1 和 img2 或 img 1 和 img3 之间悬停，我的悬停功能似乎可以正常工作，即当我删除 if 语句和计数变量时。

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

【问题讨论】：

标签： javascript jquery html hover

【解决方案1】：

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

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

【讨论】：

我尝试添加此计数器检查，但它似乎不起作用。
非常好！！这行得通。你能向我解释一下： ++counter > 1 吗？ '//placehold.it/64X64/00ff00' : '//placehold.it/64X64/0000ff' 部分功能究竟是什么？我不熟悉？和：符号出现在这里
我想将其概括为超过 3 张图像，但一旦我确切知道该部分的作用，我应该能够从这里获取它
@user3859248 即ternary operator
如果条件++counter > 1 为真则返回//placehold.it/64X64/00ff00 否则//placehold.it/64X64/0000ff - 就像if...else 语句

【解决方案2】：

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

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

【讨论】：

【解决方案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" />

【讨论】：

如何将其推广到数组中的 n 个变量，而不仅仅是两个？

【解决方案4】：

简单点怎么样？

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

【讨论】：

你能解释一下这里发生了什么吗：
计数器 = (counter===3) ? 1 : (计数器+1);
如果计数器等于3，则将其重置为1，否则将仅增加1。

【解决方案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
});

【讨论】：

【解决方案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");

    });
});

【讨论】：