Changing image with jQuery based upon hasClass

Question

I am piggy-backing off of this question, and would like to use this technique within an event handler that looks for a 'has class'.

The goal is to have this in a menu bar with icons/images.

So far, I am not able to find the bug in the following code:

$('.className').click(function(){
    $('.className').removeClass('activeDesignation');
    $(this).addClass('activeDesignation');
    if ( $('.className').hasClass('activeDesignation')){
            $(this).attr("src").replace(".png", "[suffix].png");
    };
});

The general Syntax appears to be ok, since the following works:

$('.className').click(function(){
    $('.className').removeClass('activeDesignation');
    $(this).addClass('activeDesignation');
    if ( $('.className').hasClass('activeDesignation')){
            $(this).hide('slow');
    };
});

Just at a loss here

you are removing class at start and down you are checking if class exists. it is unclear — Ehsan Sajjad, Sep 12 '14 at 04:50
Logically speaking, your code is removing all 'activedesignation' then, placing it on the current 'className' that was clicked. Therefore there is no need for the `if` in the code. I see a logic fallacy; hence failing to determine what you are trying to achieve. — Mysteryos, Sep 12 '14 at 04:50

Matt Skeldon · Answer 1 · 2014-09-12T05:00:29.263

$(this).attr("src").replace(".png", "[suffix].png");

This will successfully replace the string with the value that you want you never reassign it back to the source of the image.

$(this).attr("src", $(this).attr("src").replace(".png", "[suffix].png"));

As the two comments in the question point out the if check is rather pointless

$('.className').click(function(){
    $('.className').removeClass('activeDesignation');
    $(this).addClass('activeDesignation')
           .attr("src", $(this).attr("src").replace(".png", "[suffix].png"));
});

score 0 · Answer 2 · answered Sep 12 '14 at 04:59

You are removing activeDesignation from all className elements and then checking $('.className').hasClass('activeDesignation') condition which will be false always.

You can remove if condition and simply replace image extension. But you need to store this replace and then assign it again.

$('.className').click(function(){
    $('.className').removeClass('activeDesignation');
    $(this).addClass('activeDesignation');
    //if ( $('.className').hasClass('activeDesignation')){ // remove if 
        var newSRC = $(this).attr("src").replace(".png", "[suffix].png");//store new src
       $(this).attr("src",newSRC );
    //};
});

score 0 · Accepted Answer · answered Sep 12 '14 at 05:43

So you want whichever image you click on to use a different image (one with a suffix) and to have some class added to it. It looks like you want something like this:

JS (jQuery):

$('.item').on('click', function() {
    $('.item').removeClass('active').each(function() {
        $(this).attr('src', $(this).attr('src').replace('[suffix].jpg','.jpg'));
    });
    $(this).addClass('active').attr('src', $(this).attr('src').replace('.jpg','[suffix].jpg'));
});

Here's a fiddle.

Changing image with jQuery based upon hasClass

3 Answers3