jQuery - img src在悬停和点击时发生变化 [英] jQuery - img src change on hover and on click

问题描述

我有一张我创建的图片，现在我需要变成一个按钮。根据按钮的状态，有四个不同的png文件： icon1-on.png，icon1-on-hover.png，icon1-off.png，icon1-off-hover.png 。我需要更改点击和悬停的img的src。我的HTML是：

< img class =sheild_iconid =icon1src =../ img / icon1-on。 png/>

当按钮开时，我有悬停状态， p>

  $（。sheild_icon）
 .mouseover（function（）{
 this.src = this。 src.replace（' -  on.png'，'-on-hover.png'）; 
}）
 .mouseout（function（）{
 this.src = this.src。替换（' -  on-hover.png'，'-on.png'）; 
}）; 
  

现在我需要点击 icon1-on.png 到 icon1-off.png 。当img src是 icon1-off.png 时，将鼠标悬停在 icon1-off-hover.png

解决方案

您也可以这样做：

  $（。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 $ / $ 2 $）; 
 else this.src = this.src.replace（/(.*)- off（。*）/，$ 1  -  on $ 2）; 
} 
）; 
  

检查小提琴： http://jsfiddle.net/mifi79/p2pYj/ （注意我没有使用真实图像，因此您必须打开控制台才能看到它记录每个src动作）

因此，基于@TJ和我下面的小方条，我将介绍这个选项，它将为您提供最好的世界 -

  $（jQuery事件处理程序的便利性，原生JS的indexOf方法的速度以及我原来的答案的简洁性） .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.repla ce（/(.*)- off（。*）/，$ 1  -  on $ 2）; 
} 
）; 
  

你可以在这个小提琴中看到演示： http://jsfiddle.net/mifi79/p2pYj/1/

唯一的警告如果图片被命名为turn-on-on.png，你可能会得到一些奇怪的结果。

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

解决方案

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.

这篇关于jQuery - img src在悬停和点击时发生变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！