Adding class on an image click?

Question

function updateOption(selection, option) {
        jQuery('body,html').animate({
            scrollTop: jQuery("#msg").offset().top
        }, 800);
        jQuery('.'+selection).each(function() {
            jQuery("img."+selection).removeClass("optionSelected");
        });
        jQuery.ajax({
            type: "GET",
            url: "../v1_include/v1_session_boutique.inc.php",
            data: selection + "=" + option,
            success: function(msg){
                jQuery('#msg').fadeIn('fast');
                var List = document.getElementById('msg');
                List.innerHTML = msg;
                  jQuery(".StoreMsgPanier").animate( { opacity: 0.25 }, 1000)
                    .animate( { opacity: 1 }, 1000);
            }
        });
}


<p>Option 1</p>
<div id="opt3">
    <a href="javascript:updateOption('select_1_3','1-5-1');"><img src="../v1_images_option/crop/5_1.jpg" alt="" style="margin:2px;padding:5px;border:1px solid #D6D6D6" class="select_1_3 optionSelected" /></a>
    <a href="javascript:updateOption('select_1_3','1-6-1');"><img src="../v1_images_option/crop/6_1.jpg" alt="" style="margin:2px;padding:5px;border:1px solid #D6D6D6" class="select_1_3" /></a>
</div>
<p>Option 2</p>
<div id="opt2">
    <a href="javascript:updateOption('select_1_2','1-3-1');"><img src="../v1_images_option/crop/3_1.jpg" alt="" style="margin:2px;padding:5px;border:1px solid #D6D6D6" class="select_1_2" /></a>
    <a href="javascript:updateOption('select_1_2','1-4-1');"><img src="../v1_images_option/crop/4_1.jpg" alt="" style="margin:2px;padding:5px;border:1px solid #D6D6D6" class="select_1_2" /></a>
</div>

This code works fine but how can I, after removing all 'optionSelected' class, add 'optionSelected' ONLY to the image I just clicked ?

Thanks for your help...

Selvakumar Arumugam · Accepted Answer · 2012-05-09 19:53:55Z

2

You can either pass this from the caller and use it inside the function,

Markup: Added this to the updateOption function call

    <a href="javascript:updateOption('select_1_3','1-5-1', this);">

JS: Changed to _this.find(..

  function updateOption(selection, option, _this) {
    //..
    //...
       $(_this).parent().find("img").removeClass("optionSelected"); //remove class for all images
       $(_this).find("img").addClass("optionSelected"); //add class to the image inside the link

Alternatively, It is good practice to use unobtrusive way.. See below,

Markup: Added this to the updateOption function call

<p>Option 1</p>
<div id="opt3">
    <a href="javascript: void(0)" data-opt="1-5-1" data-sel="select_1_3"><img src="../v1_images_option/crop/5_1.jpg" alt="Image" class="select_1_3 img_style optionSelected" /></a>
    <a href="javascript: void(0);" data-opt="1-6-1" data-sel="select_1_3"><img src="../v1_images_option/crop/6_1.jpg" alt="Image" class="select_1_3 img_style" /></a>
</div>
<p>Option 2</p>
<div id="opt2">
    <a href="javascript: void(0)" data-opt="1-3-1" data-sel="select_1_2"><img src="../v1_images_option/crop/3_1.jpg" alt="Image" class="select_1_2 img_style" /></a>
    <a href="javascript: void(0)" data-opt="1-4-1" data-sel="select_1_2"><img src="../v1_images_option/crop/4_1.jpg" alt="Image" class="select_1_2 img_style" /></a>
</div>

CSS:

.img_style { margin:2px;padding:5px;border:1px solid #D6D6D6; }

And finally the JS: Bunch of modification, please try to understand it before you implement it.

$(function() {
    $('.img_style').click(function() {
        $('body,html').animate({
            scrollTop: $("#msg").offset().top
        }, 800);

        var $this = $(this);        

        $this //current link
        .closest('div') //will return you the enclosing div lets say <div id="opt2">
        .find('img') //find all images inside <div id="opt2">
        .removeClass("optionSelected"); //remove class

        $this.addClass('optionSelected');

        var $parent = $this.parent();

        var option = $parent.attr('data-opt'); //will return you the option
        var selection = $parent.attr('data-sel');

        $.ajax({
            type: "GET",
            url: "../v1_include/v1_session_boutique.inc.php",
            data: selection + "=" + option,
            success: function(msg) {
                $('#msg').fadeIn('fast').html(msg);

                $(".StoreMsgPanier").animate({
                    opacity: 0.25
                }, 1000).animate({
                    opacity: 1
                }, 1000);
            }
        });
    });
});

DEMO -> To show that the option and selection is retrieved.

edited May 9, 2012 at 19:53

answered May 9, 2012 at 17:49

Selvakumar Arumugam

79.9k15 gold badges123 silver badges139 bronze badges

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

3 Comments

Chris Over a year ago

Well I already found the way to remove the class. I just need to ADD 'optionSelected' to the image clicked. This code is not working. Thanks for your help...

Chris Over a year ago

@Vegas : ../v1_include/v1_session_boutique.inc.php?undefined=undefined -> option is undefined

Chris Over a year ago

@Vegas : var option = $(this).parent().attr('data-opt');

thecodeparadox · Accepted Answer · 2012-05-09 17:48:50Z

2

$('#id_of_image').on('click', function() {
  $('img').removeClass('optionSelected');
  $(this).addClass('optionSelected');
});

answered May 9, 2012 at 17:48

thecodeparadox

87.2k22 gold badges143 silver badges164 bronze badges

Collectives™ on Stack Overflow

Adding class on an image click?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related