无法读取未定义的属性'replace‘
无法读取未定义的属性'replace‘
提问于 2014-12-05 19:43:58
我有一个简单的带有图片的菜单。图像源的变化取决于查看者的操作(鼠标悬停、单击、不显示任何内容)。当单击另一个图像时，我在将非活动图像源重置为默认值时遇到问题？
(单击) button1S.jpg -> button1S_active.jpg
我已经尝试使用.not(这).replace，但我得到一个错误，根据chrome“无法读取属性‘替换’的未定义”。
<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);
});
非常感谢。
回答 2
Stack Overflow用户
回答已采纳
发布于 2014-12-05 19:46:36
问题是unactive是一个jQuery对象，而不是一个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/>
Stack Overflow用户
发布于 2014-12-05 22:04:28
在我的评论之后，您可以使用单个类和称为"sprites“的技术来替换所有这些”图像URL的修改“。
sprite基本上是一个包含多张图片的图像文件。我的JSFiddle中使用的代码如下所示：
JSFiddle: http://jsfiddle.net/TrueBlueAussie/7v1L2yqd/2/
可以通过更改样式中的图像偏移来参照它们。在我的示例中，它只是简单地添加和删除了一个hover样式，它在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;
}这里有一个方便的参考：http://www.w3schools.com/css/css_image_sprites.asp
如果sprite包含所有的图标，您可以将它们偏移到它们的基础图像，而.hover类将只移动水平位置：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27315193
复制相关文章
相似问题
腾讯云开发者
