jQuery在悬停时更改引导图标的路径答案

【问题标题】：jQuery change path to bootstrap icons on hoverjQuery在悬停时更改引导图标的路径
【发布时间】：2014-02-04 05:11:20
【问题描述】：

我正在使用带有如下文件路径的引导图标制作自定义工具栏：

images/icons/white/png/font_italic_icon&16.png

在.hover() 上，如何将白色替换为黑色以形成这样的路径？

images/icons/black/png/font_italic_icon&16.png

这将为我节省很多为每个图标做这样的事情。

$(".myclass").hover(
    function () {
        $(this).find('img').attr("src", "images/icons/white/png/round_plus_icon&16.png");
    },
    function () {
        $(this).find('img').attr("src", "images/icons/black/png/round_plus_icon&16.png");
    }
);

【问题讨论】：

为什么不能将图标放在背景中？这样就容易多了。

标签： javascript jquery animation hover

【解决方案1】：

您可以使用原生 JavaScript replace 函数：

      "images/icons/white/png/round_plus_icon".replace("/white/", "/black/");
// -> "images/icons/black/png/round_plus_icon"

把它放在一起：

function () {
    var $img = $(this).find("img");
    var newsrc = $img.attr("src").replace("/black/", "/white/");
    $img.attr("src", newsrc);
},
function () {
    var $img = $(this).find("img");
    var newsrc = $img.attr("src").replace("/white/", "/black/");
    $img.attr("src", newsrc);
}

注意：通过使用jQuery.attr(name, callback) 语法，可以在不使用var 的情况下重写上述内容。

【讨论】：

【解决方案2】：

你不需要javascript，使用css:hover事件改变相应图标类的background-image

【讨论】：

【解决方案3】：

也许你可以使用替换 http://www.w3schools.com/jsref/jsref_replace.asp
$(this).find('img').attr( "src", $(this).find('img').attr("src").replace("white","black") );

【讨论】：