click on image to add or remove class

Question

I have a bunch of images and I want to add / remove a border and a box shadow on click. I thought it would be very simple, but it seems i am overlooking something here.

html:

<img class='unselected' src='/images/dot.en.hc.png' alt='dot' title='dot' />

jquery:

$('img').click(function() {
    if ($(this).hasClass("selected")) {
        $(this).removeClass('selected').addClass('unselected');
    } else {
        $(this).removeClass('unselected').addClass('selected');
    }
});

css:

.selected {
    border: 2px solid #0F0;
    box-shadow: 0px 0px 3px 2px #0F0;
    transition: border 0.2s, box-shadow 0.2s;
}
.unselected {
    border: 2px solid #FFF;
    box-shadow: 0px 0px 0px 0px #0F0;
    transition: border 0.2s, box-shadow 0.2s;
}

EDIT: as the code above seems to be fine, I am printing here the full code that I have on the website (I just started this little site now to test few things, so it is quite empty):

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script>
$('img').click(function() {
    if ($(this).hasClass("selected")) {
        $(this).removeClass('selected').addClass('unselected');
    } else {
        $(this).removeClass('unselected').addClass('selected');
    }
});
</script>
<style>
img {
    max-width: 50px;
}
.selected {
    border: 2px solid #0F0;
    box-shadow: 0px 0px 3px 2px #0F0;
    transition: border 0.2s, opacity 0.2s, filter 0.2s;
    opacity: 1;
    filter: alpha(opacity = 100);
}
.unselected {
    border: 2px solid #FFF;
    box-shadow: 0px 0px 0px 0px #0F0;
    transition: border 0.2s, opacity 0.2s, filter 0.2s;
    opacity: 0.8;
    filter: alpha(opacity = 80);
}
</style>
</head>
<body>

<form method="post" enctype="multipart/form-data" action="link.php">
<input type="hidden" name="log" value="1"/>
<img class='unselected' src='/images/dot.en.hc.png' id='dot.en.hc' alt='dot.en.hc' title='dot.en.hc' />

</form>

</body>
</html>

here is your code in a jsfiddle.. jsfiddle.net/u4C64/1 - it works.. what is the issue? do you have this code in a document ready() method or window.load event to make sure the code runs when all images have loaded? — Jonathan Marzullo
– Jonathan Marzullo, Commented Nov 19, 2013 at 19:38
Wow, you're right, in the JSfiddle it works perfectly. Weird. On my page it just does not do anything. I check the element and the class does not change. like the jquery does not run or something like that. — Kolja
– Kolja, Commented Nov 19, 2013 at 19:43

Venkata Krishna · Accepted Answer · 2013-11-19 19:55:05Z

2

Use .toggleClass() instead of adding and removing the class.

Also, wrap it with $(document).ready

$(document).ready(function () {
    $('img').click(function () {
        $(this).toggleClass('selected unselected');
    });
});

edited Nov 19, 2013 at 19:55

answered Nov 19, 2013 at 19:35

Venkata Krishna

15.2k5 gold badges45 silver badges57 bronze badges

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

3 Comments

andi Over a year ago

This is a little cleaner than the OP's code, but functionally it is no different so it wouldn't solve any problem that OP is having.

Rajaprabhu Aravindasamy Over a year ago

@andi OP doesn't has any problem with his code. He just needs a better one.

andi Over a year ago

I got the impression, based on his question, that it wasn't working for him. But I am not 100% sure what he meant.

Jonathan Marzullo · Accepted Answer · 2013-11-19 19:51:36Z

0

what about checking if the DOM is ready and or that the images have loaded

http://jsfiddle.net/u4C64/1/

also with code below:

ready(): http://api.jquery.com/ready/

// wait until DOM is ready
$(document).ready(function(){

    // wait until all images are loaded
    $(window).on("load", function(){

         $('img').click(function() {
            if ($(this).hasClass("selected")) {
                 $(this).removeClass('selected').addClass('unselected');
            } else {
                 $(this).removeClass('unselected').addClass('selected');
            }    
        });

    }); 

});

answered Nov 19, 2013 at 19:51

Jonathan Marzullo

7,0613 gold badges42 silver badges48 bronze badges

2 Comments

Kolja Over a year ago

This actually solved the problem!! Thanks. But one question remains: why does this make the difference? I did wait until the site was fully loaded, etc. before I attempted to click. Explanation?

Jonathan Marzullo Over a year ago

@koljanep the ready() function waits until the DOM (all html markup) has loaded.. the window load event waits until all images, links, assets are fully loaded.. Thats why i put the window load event inside the ready() method to make sure the DOM is ready before running the load event, because sometimes the DOM might be ready before the images are loaded due to browser inconsistencies, network, and image size.. .. Its always best to wait until all images have been loaded before trying to do anything with them :)

inputError · Accepted Answer · 2013-11-19 19:47:40Z

0

$('img').click(function() {
   if( $(this).hasClass('selected') ) {
        $(this).toggleClass(' unselected selected');
    }
    else{
         $(this).addClass('selected');
    }
});

Check the working & updated fiddle

answered Nov 19, 2013 at 19:47

inputError

6403 gold badges13 silver badges28 bronze badges

Collectives™ on Stack Overflow

click on image to add or remove class

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related