javascript - jQuery 更改悬停时引导图标的路径

Question

我正在使用引导图标制作自定义工具栏，其文件路径如下所示:

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

Answer 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 的情况下重写上述内容。