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)。您的悬停事件处理程序都没有触及count的值，因此一旦设置了处理程序（1和2或1和3），它们就永远不会被更改。并且由于添加处理程序时count始终为零，因此您始终可以获得第一对。

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

Answer 2

您需要在悬停处理程序

中进行计数器检查

＆＃13;

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

＆＃13;

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

＆＃13;

在您的代码中，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

6 个答案: