无法读取未定义的属性'替换' [英] Cannot read property 'replace' of undefined
本文介绍了无法读取未定义的属性'替换'的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个带图像的简单菜单。图像源根据观看者的动作而改变（鼠标悬停，点击，无）。当点击另一个图像时，我无法将非活动图像源重置为默认值。
（点击）button1S.jpg - > button1S_active.jpg p>
我试图使用.not（this）.replace，但是我根据chrome得到一个错误Can not read property'replace'of undefined。
< head>
< script type =text / javascriptsrc =jquery-1.11.1.min.js>< / script>
< / head>
< body>
< img class =menu_btnsrc =button1S.jpg>< br>
< img class =menu_btnsrc =button2S.jpg>< br>
< img class =menu_btnsrc =button3S.jpg>< br>
< img class =menu_btnsrc =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'）; //没有这个，它可以工作，但是当无效时，_active.jpg不会被移除
unactive.removeClass（active）;
$（this）.addClass（'active'）;
this.src = this.src.replace（'_ hover.jpg'，'_active.jpg' ）;
alert（this.src）;
}）;
非常感谢。 / p>
解决方案
问题是 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'，'正常'）}）; unactive.removeClass（active）; $（this）.addClass（'active'）; this.src = this.src.replac e（'hover'，'active'）;}）;
< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js>< / script>< img class =menu_btnsrc =// placehold.it/64X32&text=normal/>< br />< img class =menu_btnsrc =// placehold.it/64X32&text=normal/><<< ; br />< img class =menu_btnsrc =// placehold.it/64X32&text=normal/>< br />< img class =menu_btnsrc =// placehold.it/64X32&text=normal/>< br />
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
I have tried to use .not(this).replace, but I get an error according to chrome "Cannot read property 'replace' of undefined".
<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.
解决方案
the problem is unactive is a jQuery object not a dom element reference
$("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/>
这篇关于无法读取未定义的属性'替换'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
