问无法读取未定义的属性'replace‘
EN

Stack Overflow用户

提问于 2014-12-05 11:43:58

回答 2查看 18.7K关注 0票数 0

我有一个简单的带有图片的菜单。图像源的变化取决于查看者的操作(鼠标悬停、单击、不显示任何内容)。当单击另一个图像时，我在将非活动图像源重置为默认值时遇到问题？

(单击) 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);
});

非常感谢。

javascript

jquery

html

有奖征集｜云上CPU玩转AIGC挑战赛

参加活动赢取洛斐键盘、小米电纸书、智能音响等鹅厂周边！

回答 2

Stack Overflow用户

回答已采纳

发布于 2014-12-05 11: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/>

票数 1

Stack Overflow用户

发布于 2014-12-05 14: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;
}