jQuery的 - 悬停和点击IMG SRC变化(jQuery - img src change o

我有一个形象，我创建了我现在需要变成一个按钮。 有视按钮处于什么状态四个不同的PNG文件：ICON1，on.png，ICON1上-hover.png，ICON1，off.png，ICON1断，hover.png。 我需要改变IMG的src的点击和悬停。 我的HTML是：

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

我有悬停状态时，按钮上工作正常：

$(".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');
});

现在我需要做的从ICON1-on.png到ICON1-off.png单击更改。 和悬停时，IMG SRC是ICON1-off.png到ICON1-OFF-hover.png

Answer 1:

你也可以做这样的事情：

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

退房小提琴： http://jsfiddle.net/mifi79/p2pYj/ （注意我并没有使用真正的图像，所以你必须打开控制台，看看它登录在src上的每个动作）

因此，基于@TJ和我的小以下侧边栏，我要提出这个选项为一体，为您提供最好的一切worlds- 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.replace(/(.*)-off(.*)/, "$1-on$2");
    }
);

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

唯一的条件，这将是，如果图像被命名为开启，on.png你可以得到一些奇怪的结果。

Answer 2:

有喜欢的添加和删除HTML类到你的形象和使用CSS背景更好的解决方案。 这会让你的代码更简单，更易于使用。
但只要你要求的jQuery的解决方案，我会用触发器，如：

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

Answer 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');
});

Answer 4:

采用

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

:)

文章来源: jQuery - img src change on hover and on click