jQuery - img src change on hover and on click

问题

I have an image I created that I now need to turn into a button. There are four different png files depending on what state the button is in: icon1-on.png, icon1-on-hover.png, icon1-off.png, icon1-off-hover.png. I need to change the src of the img for both click and hover. my HTML is:

<img class="sheild_icon" id="icon1" src="../img/icon1-on.png" />

I have the hover state when the button is on working fine with:

$(".sheild_icon")
    .mouseover(function() {
        this.src = this.src.replace('-on.png', '-on-hover.png');
})
.mouseout(function() {
        this.src = this.src.replace('-on-hover.png', '-on.png');
});

Now I need to make the on click change from icon1-on.png to icon1-off.png. And the hover when the img src is icon1-off.png to icon1-off-hover.png

回答1:

You could also do something like this:

$(".sheild_icon")
    .mouseover(function() {
        this.src = this.src.replace('.png', '-hover.png');
    })
    .mouseout(function() {
        this.src = this.src.replace('-hover.png', '.png');
    })
    .click(function() {
        $(this).toggleClass("off");
        if ($(this).hasClass("off")) this.src = this.src.replace(/(.*)-on(.*)/, "$1-off$2");
        else this.src = this.src.replace(/(.*)-off(.*)/, "$1-on$2");
    }
);

Check out the fiddle: http://jsfiddle.net/mifi79/p2pYj/ (note I didn't use real images so you'll have to open the console to see it log the src on each action)

So, based on @TJ and I's little side bar below, I'm going to present this option as one that gives you the best of all worlds- the convenience of jQuery event handlers, the speed of native JS's indexOf method, and the conciseness of my original answer...

$(".sheild_icon")
    .mouseover(function() {
        this.src = this.src.replace('.png', '-hover.png');
    })
    .mouseout(function() {
        this.src = this.src.replace('-hover.png', '.png');
    })
    .click(function() {
        if (this.src.indexOf('-on') > -1) this.src = this.src.replace(/(.*)-on(.*)/, "$1-off$2");
        else this.src = this.src.replace(/(.*)-off(.*)/, "$1-on$2");
    }
);

You can see the demo in this Fiddle: http://jsfiddle.net/mifi79/p2pYj/1/

The only caveat to this would be that if the image were named turn-on-on.png you could get some weird results.

回答2:

There are better solutions like adding and removing html classes to your image and using CSS backgrounds. This will make your code simpler and easier to use.
But as long as you requested for jQuery solution, I would use triggers like:

var $img = $(".sheild_icon"); // caching the image object for better performance
$img.on('click', function(e) {
    if (!$img.hasClass('clicked')) {
        $img.addClass('clicked').trigger('classChange');
    }
}).on('mouseover', function() {
    $img.addClass('hovered').trigger('classChange');
}).on('mouseout', function() {
    if ($img.hasClass('hovered')) {
        $img.removeClass('hovered').trigger('classChange');
    }
});
$img.on('classChange', function() {
    if (!$img.hasClass('hovered') && !$img.hasClass('clicked')) // not hovered, not clicked
        $img.attr('src', '../img/icon1-on.png');
    if ($img.hasClass('hovered') && !$img.hasClass('clicked')) // hovered but not clicked
        $img.attr('src', '../img/icon1-on-hover.png');
    if (!$img.hasClass('hovered') && $img.hasClass('clicked')) // clicked but not hovered
        $img.attr('src', '../img/icon1-off.png');
    if ($img.hasClass('hovered') && $img.hasClass('clicked')) // clicked and hovered
        $img.attr('src', '../img/icon1-off-hover.png');
    console.log($img.attr('src'));
});

回答3:

$(".sheild_icon").click(function () {
if (this.src.indexOf('on')>0)
     this.src = src.replace('-on.png', '-off.png');
else
     this.src = this.replace('-off.png', '-on.png');
})
$(".sheild_icon").mouseover(function () {
   if (this.src.indexOf('on')>0)
      this.src = this.src.replace('-on.png', '-on-hover.png');
else
      this.src = this.src.replace('-off.png', '-off-hover.png');
}).mouseout(function () {
   if (this.src.indexOf('on')>0)
      this.src = this.src.replace('-on-hover.png', '-on.png');
   else
      this.src = this.src.replace('-off-hover.png', '-off.png');
});

回答4:

use

$(this).attr("src",$(this).attr("src").replace("old","new"));

:)

来源：https://stackoverflow.com/questions/23959132/jquery-img-src-change-on-hover-and-on-click