jQuery – img src在hover和点击时更改
我有一个我创建的图像，我现在需要变成一个按钮。 根据按钮的状态，有四种不同的png文件： icon1-on.png，icon1-on-hover.png，icon1-off.png，icon1-off-hover.png 。 我需要为点击和hover更改img的src。 我的HTML是：
当按钮处于正常工作状态时，我有hover状态：
$(".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时，将鼠标hover在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(.*)/, "$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，你可能会得到一些奇怪的结果。
有更好的解决方案，如为图像添加和删除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')); });
$(".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'); });
使用
$(this).attr("src",$(this).attr("src").replace("old","new"));
🙂