admin管理员组

文章数量:1336632

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.

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.

  • javascript
  • jquery
  • html
  • menu
Share Improve this question edited Apr 28, 2017 at 16:40 Maki asked Dec 5, 2014 at 11:43 MakiMaki 6374 gold badges12 silver badges26 bronze badges 6
  • 1 Wele to StackOverflow! Please see "Should questions include “tags” in their titles?", where the consensus is "no, they should not". – user57508 Commented Dec 5, 2014 at 11:44
  • While Arun P Johny has provided a solution, I would do this type of hover animation using styling and just add/remove the class. (e.g. to change offsets within the image). This will avoid any of the current glitches you may see (as the hover images are loaded on demand). – iCollect.it Ltd Commented Dec 5, 2014 at 11:48
  • If you wish to ignore my advice, just use unactive[0] to reference the DOM object inside the jQuery wrapper. e.g. unactive[0].src = unactive[0].src.replace or use the jQuery attr('src') function instead :P – iCollect.it Ltd Commented Dec 5, 2014 at 12:05
  • @TrueBlueAussie Thank you for the advice, I understand your suggestion but don't have enough knowledge yet to write that. Do you think you can provide an example, please? P.S. Aussie are awesome!! I love Australia. – Maki Commented Dec 5, 2014 at 12:50
  • It involves changes to your images (you must include multiple images in each file) so takes a little more work. I do feel the results are worth it though. I will add something below to cover it. – iCollect.it Ltd Commented Dec 5, 2014 at 13:51
 |  Show 1 more ment

2 Answers 2

Reset to default 1

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./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/>

Following on from my ment, you can replace all this "modification of image URLs" using just a single class and a technique known as "sprites".

A sprite is basically an image file that contains multiple pictures. The one used in my JSFiddle looks like this:

JSFiddle: http://jsfiddle/TrueBlueAussie/7v1L2yqd/2/

You reference them by changing the image offsets in the style. In my example it simply adds and removes a hover style, which in the CSS styling causes the background image to be offset.

$('.menu_btn').hover(function () {
    $(this).addClass('hover');
}, function () {
    $(this).removeClass('hover');
});

CSS:

.menu_btn {
    width: 44px;
    height: 44px;
    background: url(http://www.w3schools./css/img_navsprites.gif) 0 0;
}
.hover {
    background-position: -46px 0;
}

Handy reference here: http://www.w3schools./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:

本文标签： javascriptCannot read property 39replace39 of undefinedStack Overflow

版权声明：本文标题：javascript - Cannot read property &#39;replace&#39; of undefined - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742413752a2470306.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。