javascript 无法读取未定义的属性“替换”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27315193/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Cannot read property 'replace' of undefined
提问by Maki
I have a simple menu with images. The image source changes depending on viewer's action (mouseover, click, nothing). I am having trouble to reset the non-active images source to default when another image is clicked?
我有一个带有图像的简单菜单。图像源根据查看者的操作（鼠标悬停、单击、什么都不做）而变化。单击另一个图像时，我无法将非活动图像源重置为默认值？
(on-click) button1S.jpg -> button1S_active.jpg
(点击) button1S.jpg -> button1S_active.jpg
I have tried to use .not(this).replace, but I get an error according to chrome "Cannot read property 'replace' of undefined".
我曾尝试使用 .not(this).replace，但根据 chrome“无法读取未定义的属性‘replace’”出现错误。
<head>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
</head>
<body>
<img class="logo" src="logo.jpg"><br>
<img class="menu_btn" src="button1S.jpg"><br>
<img class="menu_btn" src="button2S.jpg"><br>
<img class="menu_btn" src="button3S.jpg"><br>
<img class="menu_btn" src="button4S.jpg">
</body>
<script>
$("img.menu_btn").hover(
function () {
this.src = this.src.replace('.jpg', '_hover.jpg');
$(this).addClass('hovered');
},
function () {
this.src = this.src.replace('_hover.jpg', '.jpg');
$(this).removeClass('hovered');
});
$('img.menu_btn').click(
function () {
var unactive = $('img.menu_btn').not(this);
unactive.src = unactive.src.replace('_active.jpg', '.jpg'); //without this, it works but _active.jpg isn't removed when unactive.
unactive.removeClass("active");
$(this).addClass('active');
this.src = this.src.replace('_hover.jpg', '_active.jpg');
alert(this.src);
});
Thank you very much.
非常感谢你。
回答by Arun P Johny
the problem is unactiveis a jQuery object not a dom element reference
问题是unactivejQuery 对象而不是 dom 元素引用
$("img.menu_btn").hover(function() {
if ($(this).hasClass('active')) {
return;
}
this.src = this.src.replace('normal', 'hover');
$(this).addClass('hovered');
}, function() {
if ($(this).hasClass('active')) {
return;
}
this.src = this.src.replace('hover', 'normal');
$(this).removeClass('hovered');
});
$('img.menu_btn').click(function() {
var unactive = $('img.menu_btn').not(this);
unactive.attr('src', function(i, src) {
return src.replace('active', 'normal')
});
unactive.removeClass("active");
$(this).addClass('active');
this.src = this.src.replace('hover', 'active');
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img class="menu_btn" src="//placehold.it/64X32&text=normal" />
<br/>
<img class="menu_btn" src="//placehold.it/64X32&text=normal" />
<br/>
<img class="menu_btn" src="//placehold.it/64X32&text=normal" />
<br/>
<img class="menu_btn" src="//placehold.it/64X32&text=normal" />
<br/>回答by Gone Coding
Following on from my comment, you can replace all this "modification of image URLs" using just a single class and a technique known as "sprites".
根据我的评论，您可以仅使用一个类和一种称为“精灵”的技术来替换所有这些“图像 URL 的修改”。
A sprite is basically an image file that contains multiple pictures. The one used in my JSFiddle looks like this:
精灵基本上是一个包含多张图片的图像文件。我的 JSFiddle 中使用的那个看起来像这样：
JSFiddle:http://jsfiddle.net/TrueBlueAussie/7v1L2yqd/2/
JSFiddle：http : //jsfiddle.net/TrueBlueAussie/7v1L2yqd/2/
You reference them by changing the image offsets in the style. In my example it simply adds and removes a hoverstyle, which in the CSS styling causes the background image to be offset.
您可以通过更改样式中的图像偏移来引用它们。在我的示例中，它只是添加和删除hover样式，这在 CSS 样式中会导致背景图像偏移。
$('.menu_btn').hover(function () {
$(this).addClass('hover');
}, function () {
$(this).removeClass('hover');
});
CSS:
CSS：
.menu_btn {
width: 44px;
height: 44px;
background: url(http://www.w3schools.com/css/img_navsprites.gif) 0 0;
}
.hover {
background-position: -46px 0;
}
Handy reference here: http://www.w3schools.com/css/css_image_sprites.asp
方便参考：http: //www.w3schools.com/css/css_image_sprites.asp
If the sprite contained all your icons, you would offset them to their base image, and the .hover class would just move the horizontal position:
如果精灵包含你所有的图标，你会将它们偏移到它们的基本图像，而 .hover 类只会移动水平位置：
