Javascript 无法读取属性'；更换'；未定义的

我有一个简单的图像菜单。图像源根据查看器的操作（鼠标悬停、单击、无）而变化。单击其他图像时，我无法将非活动图像源重置为默认值

（单击时）button1S.jpg->button1S\u active.jpg

我曾尝试使用.not（this）.replace，但根据chrome“无法读取未定义的属性'replace'”得到一个错误

$（“图像菜单”）。悬停(
函数（）{
this.src=this.src.replace（'.jpg'，'u hover.jpg'）；
$（this.addClass（'hovered'）；
},
函数（）{
this.src=this.src.replace（“'u hover.jpg'，'.jpg'）；
$（this.removeClass（'hovered'）；
});
$（'img.menu_btn'）。单击(
函数（）{
var unactive=$（'img.menu_btn'）。不是（这个）；
unactive.src=unactive.src.replace（“'u active.jpg'，'.jpg'）；//如果没有此选项，它可以工作，但在未激活时不会删除'u active.jpg'。
非活动。removeClass（“活动”）；
$（this.addClass（'active'）；
this.src=this.src.replace（“'u hover.jpg'，'u active.jpg'）；
警报（this.src）；
});

---

非常感谢。

问题是

未激活

是jQuery对象而不是dom元素引用

$（“img.menu\u btn”）.悬停（函数（）{
if（$（this）.hasClass（'active'））{
返回；
}
this.src=this.src.replace（'normal'，'hover'）；
$（this.addClass（'hovered'）；
}，函数（）{
if（$（this）.hasClass（'active'））{
返回；
}
this.src=this.src.replace（'hover'，'normal'）；
$（this.removeClass（'hovered'）；
});
$（'img.menu_btn'）。单击（函数（）{
var unactive=$（'img.menu_btn'）。不是（这个）；
unactive.attr（'src'，function（i，src）{
返回src.replace（'active'，'normal'）
});
非活动。removeClass（“活动”）；
$（this.addClass（'active'）；
this.src=this.src.replace（'hover'，'active'）；
});








根据我的评论，您可以使用一个类和一种称为“sprite”的技术来替换所有这些“修改图像URL”

精灵基本上是一个包含多个图片的图像文件。我的JSFIDLE中使用的一个如下所示：


JSFiddle:

可以通过更改样式中的图像偏移来参照它们。在我的示例中，它只是添加和删除一个
悬停
样式，它在CSS样式中会导致背景图像偏移

$('.menu_btn').hover(function () {
    $(this).addClass('hover');
}, function () {
    $(this).removeClass('hover');
});

CSS:

.menu_btn {
    width: 44px;
    height: 44px;
    background: url(http://www.w3schools.com/css/img_navsprites.gif) 0 0;
}
.hover {
    background-position: -46px 0;
}

方便参考：

如果精灵包含您的所有图标，您会将它们偏移到其基本图像，而.hover类只会移动水平位置：
欢迎使用StackOverflow！请看，这里的共识是“不，他们不应该”。虽然
Arun P Johny
提供了一个解决方案，但我会使用样式制作这种类型的悬停动画，只需添加/删除类即可。（例如，更改图像内的偏移）。这将避免您可能看到的任何当前故障（因为悬停图像是按需加载的）。如果您希望忽略我的建议，只需使用
unactive[0]
引用jQuery包装器中的DOM对象即可。e、 g.
unactive[0].src=unactive[0].src.replace
或改用jQuery
attr（'src'）
函数：P@TrueBlueAussie谢谢你的建议，我理解你的建议，但我还没有足够的知识来写。你能举个例子吗？另外，澳大利亚人太棒了！！我喜欢澳大利亚。它涉及到对图像的更改（每个文件中必须包含多个图像），因此需要更多的工作。不过，我觉得结果是值得的。我将在下面添加一些内容来涵盖它。非常感谢！我仍然看到一些东西在类中运行不正常（在chrome中），但是图像src没有受到影响。也许我可以试着自己看看到底出了什么问题。谢谢你，TrueBlue，谢谢你的跟进。我理解你现在所说的，以及你为什么提出这个建议。毫无疑问，加载一个图像要比加载3个图像好。我猜使用jquery和css的区别在于有更多的图像或更多的css类。谢谢你的提示！从纯效率的角度来看，更多的CSS类比更多的图像更可取。图像的下载开销远远大于CSS文件的大小。正如您所看到的，jQuery代码也大大简化了。
.menu_btn {
    width: 44px;
    height: 44px;
    background: url(http://www.w3schools.com/css/img_navsprites.gif) 0 0;
}
.hover {
    background-position: -46px 0;
}