Change image with jQuery on click doesn't work

Question

I'm having a trouble with changing images with jQuery. I have following markup:

<div class="row">
    <img src="image.png" class="download-image regular-image" />
    <div class="options">
         <p>download</p>
    </div>

    <img src="image.png" class="download-image regular-image" />
    <div class="options">
         <p>download</p>
    </div>
</div>

and following code to manipulate this markup:

$('.regular-image').hover(function() {
    $(this).attr('src', 'image2.png');
}. function() {
    $(this).attr('src', 'image.png');
}

This code is pretty straightfoward and I have no problem with it but lately I introduced another function to keep active image (i.e one that shows up if element is clicked):

$('.download-image').click(function(e) {
     e.stopPropagation();
     $(this).next().toggle();
     $('.download-image').removeClass('current');
     $(this).addClass('current');
     if ($('.download-image').hasClass('current')) {
         $(this).hover(function() {
              $(this).attr('src', 'image2.png');
         }, function() {
              $(this).attr('src', 'image2.png');
         }
     }
}

Idea behind this chunk is simple - I added a current class to track what element is being active at the moment and then make its element image to stay the same on hover and mouse out using image2.png which represents active state. It works but when I click on another element, previously clicked element doesn't behave like a regular one (i.e it keeps image2.png attribute on hover and mouse out instead of acting like it was coded for .regular-image class). What I did wrong? I feel like solutio might be stupidly easy and straightforward but I can't find it by myself. Any help or thoughts will be highly appreciated! Thank you for dedicating you time and have a nice day.

UPD

To summarize my post, what I want to reach at the moment is to change image2.png back to image.png when other image is clicked and make it behave like described .regular-image in javascript code (to change it to image2.png while hovering and image.png while mouse is out)

UPD 2

With fellow devs' help I'm almost got behavior I want. I changed click event to this:

$(".download-image").click(function (event) {
    event.stopPropagation();
    $(this).next().toggle();
    $('.download-image').removeClass('current');
    $(this).addClass("current");
    $(document).delegate('.current','mouseover',function() {
        $(this).attr("src", "/image2.png");
    });
    $(document).delegate('.current','mouseout',function() {
        $(this).attr("src", "/image2.png");
    });
});

It works but only when I explicitly hover and mouse out on image, but I need to change image2.png back to image.png every time when I click on other image.

Please don't add answers into your questions here, nor add [solved] devices to titles - we don't do that. There's a button at the end of each of your questions that allows you to self-answer. Thanks! — halfer
– halfer, Commented Jun 26, 2017 at 21:03

Alex Mac · Accepted Answer · 2017-06-20 08:27:41Z

2

It seems like you have error in your code. Please check below mentioned code.

$('.regular-image').hover(function() {
    $(this).attr('src', 'image2.png');
}, function() {
    $(this).attr('src', 'image.png');
});

And if you adding image by ajax call then use below mentioned code.

$(document).on('.regular-image','hover',function() {
    $(this).attr('src', 'image2.png');
}, function() {
    $(this).attr('src', 'image.png');
});

Data element

<img data-default-image='image1.png' src='image1.png' />

$(document).delegate('button','click',function(){
   $(this).closest('img').attr('src',$(this).closest('img').data('default-image'));
});

edited Jun 20, 2017 at 8:27

answered Jun 20, 2017 at 7:18

Alex Mac

2,9931 gold badge24 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Prashant Shirke Over a year ago

Just to mention, .delegate() has been deprecated. Need to use .on() method if jQuery version is 1.7+

Vadim Novozhilov Over a year ago

Sorry but this method doesn't work for me. I do use jQuery greater than 1.7 and tried .on(); method.

Alex Mac Over a year ago

@PrashantShirke, Thank you for reminding me. I have updated my answer.

Vadim Novozhilov Over a year ago

Well, I think with your help I'm almost reached behavior I wish. I used .on() method binding it to mouseover and mouseout events instead of hover, it works but only when I'm explicitly mouse overing and mouse outing an image, but how do I actually get standard image (image.png) back when I click on other element?

Alex Mac Over a year ago

So in this case your other object is overlaying image?

|

Grinzzly · Accepted Answer · 2017-06-20 07:25:21Z

0

Try to use

e.preventDefault();

instead of

e.stopPropagation();

also I am frankly do not understand what are you trying to do by the following code:

$(this).hover(function() {
              $(this).attr('src', 'image2.png');
         }, function() {
              $(this).attr('src', 'image2.png');
         }

are you sure there should be two same lines?

answered Jun 20, 2017 at 7:25

Grinzzly

1

1 Comment

Vadim Novozhilov Over a year ago

Unfortunately preventDefault() doesn't work for me, I can invoke next element (.options div) only with .stopPropagation(); method. When it comes to code you mentioned, I use it as a part of representation of current state like assume that image.png is grey and image2.png is blue. I tried other ways to make it but only that one worked for me

halfer · Accepted Answer · 2017-06-26 21:01:52Z

0

(Posted on behalf of the OP).

I found out a way to get behavior I want by changing src attribute at the same moment when I remove .current class. My code looks like this for now:

$(".download-image").click(function (event) {
    event.stopPropagation();
    $(this).next().toggle();
    $('.download-image').removeClass('current').attr('src', 'image.png');
    $(this).addClass("current");
    $(document).delegate('.current','mouseover',function() {
        $(this).attr("src", "image2.png");
    });
    $(document).delegate('.current','mouseout',function() {
        $(this).attr("src", "image2.png");
    });
});

answered Jun 26, 2017 at 21:01

community wiki

halfer

Collectives™ on Stack Overflow

Change image with jQuery on click doesn't work

3 Answers 3

9 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related