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

时，将鼠标悬停

Answer 1

有更好的解决方案，例如在图像中添加和删除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 2

$(".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 3

您也可以这样做：

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

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

唯一需要注意的是，如果图像被命名为turn-on-on.png，你可能会得到一些奇怪的结果。

Answer 4

使用

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

：）

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

4 个答案: