Question

我有一个简单的图片菜单。图像源根据查看者的操作而变化（鼠标悬停，单击，无任何内容）。单击另一个图像时，我无法将非活动图像源重置为默认值？

（点击按钮）button1S.jpg - ＆gt; button1S_active.jpg

我曾尝试使用.not（this）.replace，但我根据chrome＆＃34获取错误;无法读取属性＆＃39;替换＆＃39;未定义＆＃34;。

<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);
});

非常感谢。

Answer 1

问题是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/>

Answer 2

继续我的评论之后，您可以仅使用一个类和一种称为“sprites”的技术来替换所有这些“图像URL的修改”。

精灵基本上是一个包含多张图片的图像文件。我的JSFiddle中使用的那个看起来像这样：

enter image description here

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

如果精灵包含所有图标，则会将它们偏移到基本图像，而.hover类只会移动水平位置：

无法阅读财产＆替换＆＃39;未定义的

2 个答案: