jQuery - img src 在悬停和单击时更改

Question

我创建了一个图像，现在需要将其变成一个按钮。根据按钮所处的状态，有四种不同的 png 文件：icon1-on.png、icon1-on-hover.png、icon1-off.png、icon1-off-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

时的hover

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 和我下面的小边栏，我将把这个选项展示为一个给你最好的世界 - 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");
    }
);

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

对此唯一需要注意的是，如果图像被命名为 turn-on-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"));

:)