无法使用jQuery从元素中删除类

Question

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>

ANd following code to manipulate it (it changes image, basically it's an active state implementation):

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

This code works well, but I'm having a trouble removing .current class by clicking on an element. Althrough I implemented it via clicking on any place of the page like this:

$("html").click(function() {
    $(".options").hide();
    $(".download-image").removeClass('current').attr("src", "image.png");
    $(".download-image").hover(function() {
        $(this).attr("src", "image2.png");
    }, function() {
        $(this).attr("src", "image.png");
    });
 });

This chunk does exactly what I want, but I also wanna have same behavior for active image too. What I tried: 1. Add .current to html click event 2. Create same function but for .current class 3. Use .on('click', '.current', function() 4. Going just like this:

$('.current').click(function() {
     $(this).removeClass('current');
}

Nothing above worked for me. Where I was wrong? Any help would be appreciated.

Answer 1

The this keyword in the callback function of a listener has the event object attached to it. You want the HTML element. You can see this in action by logging out the value of this inside of the callback and looking at the object. Try this to get the HTML element instead:

$('.current').on('click', function(e) {      
       $(e.target).removeClass('current');
 } 

Make note of the argument I'm giving to the callback. I believe this.target might actually be the same object but I'm on mobile atm so can't verify. You can though, by logging out the values with a console.log(this); statement

Answer 2

Solution was so obvious that I feel ashamed I haven't tried it before posting my question. I used .toggleClass() method and now my click() event looks like this:

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

Please note that I use old jQuery, if you're using v3+ , you should replace .delegate() method with .on() as reffered in comments.