jquery addclass() removeclass() on/off selected/clicked

Question

So for the past couple weeks I've been struggling to get this code right. I have a clothing website with a standard product page. On this product page I have option images (blue label has blue image, red label has red image, etc.) My line of code for this section is

<operation>
        <search position="before">
    <![CDATA[<input type="radio" name="option[<?php echo $option['product_option_id']; ?>]"]]>
  </search>
        <add>
    <![CDATA[
    <?php if(isset($option_value['option_image'])){?>
      <img src="<?php echo $option_value['option_image'];?>" border="0" alt="0" class="option-value-image optionimageimg" rel="<?php echo $option_value['option_image_thumb']."|||".$option_value['option_image_popup'];?>" />
    <?php } ?>
    ]]>
  </add>
    </operation>

The problem I am facing is adding a class

.optionimageimg.active {

border-color: #ffbcbc;

}

to the image once the image has been clicked on. The closet I have came to a solution is

$(this).closest('.option.form-group').find('.optionimage img').removeClass('active');
$(this).addClass('active');

However, this doesn't do what I want. It will successfully add the border to a product image once clicked on but will then remove the border if you hover over a different product image.

What I want is for the border to actually remain on the clicked image until another image is clicked and not hovered over. If that make sense.

Example:

Image A Unselected, border only on hover Image B Selected, border stays until different image is clicked Image C Unselected, border only on hover

Here's a link to one of my product pages if you need to see how it currently works (the circle options up under the color section)

http://www.classyrose.com/dresses.html?product_id=32

Thank you,

This is the full code to where my javascript code is found

function changeImage(image_thumb,image_popup){


  $('.zoomWindow').css('background-image','url("'+image_popup+'")');
  $('.product-info .image a').prop('href',image_popup);
  $('#image').prop('src',image_thumb);



}




if(change_option_image_hover){

    $('.option-value-image').hover(function(){

    var option_image = $(this).attr('rel');

    var image_thumb = option_image_thumb;
    var image_popup = option_image_popup;

    if(option_image){
      var option_image_split = option_image.split("|||");

      var option_image_thumb = option_image_split[0];
      var option_image_popup = option_image_split[1];

      if(option_image_thumb != "" && option_image_popup != ""){
        image_thumb = option_image_thumb;
        image_popup = option_image_popup;
      }
    }





    $(this).closest('.option.form-group').find('.optionimage img').removeClass('active');
    $(this).addClass('active');
  });




    $('.option-image-select > option').hover(function(){

    var option_image = $(this).attr('rel');

    var image_thumb = option_image_thumb;
    var image_popup = option_image_popup;

    if(option_image){
      var option_image_split = option_image.split("|||");

      var option_image_thumb = option_image_split[0];
      var option_image_popup = option_image_split[1];

      if(option_image_thumb != "" && option_image_popup != ""){
        image_thumb = option_image_thumb;
        image_popup = option_image_popup;
      }
    }

    changeImage(image_thumb,image_popup);
  });





    $('.option input').hover(function(){

    var option_image = $(this).attr('rel');

    var image_thumb = option_image_thumb;
    var image_popup = option_image_popup;

    if(option_image){
      var option_image_split = option_image.split("|||");

      var option_image_thumb = option_image_split[0];
      var option_image_popup = option_image_split[1];

      if(option_image_thumb != "" && option_image_popup != ""){
        image_thumb = option_image_thumb;
        image_popup = option_image_popup;
      }
    }

    changeImage(image_thumb,image_popup);

  });




    $('.option label').hover(function(){

    var option_image = $(this).attr('rel');
    var image_thumb = option_image_thumb;
    var image_popup = option_image_popup;

    if(option_image){
      var option_image_split = option_image.split("|||");

      var option_image_thumb = option_image_split[0];
      var option_image_popup = option_image_split[1];

      if(option_image_thumb != "" && option_image_popup != ""){
        image_thumb = option_image_thumb;
        image_popup = option_image_popup;
      }
    }

    changeImage(image_thumb,image_popup);
  });








}












if(change_option_image_select){
$(".option").keyup(function() {
  $(".option-image-select option:selected" ).each(function() {
    var option_image = $(this).attr('rel');

    var image_thumb = option_image_thumb;
    var image_popup = option_image_popup;

    if(option_image){
      var option_image_split = option_image.split("|||");

      var option_image_thumb = option_image_split[0];
      var option_image_popup = option_image_split[1];

      if(option_image_thumb != "" && option_image_popup != ""){
        image_thumb = option_image_thumb;
        image_popup = option_image_popup;
      }
    }

    changeImage(image_thumb,image_popup);
  });
});


$(".option select").keyup(function() {
  $(".option-image-select option:selected" ).each(function() {
    var option_image = $(this).attr('rel');

    var image_thumb = option_image_thumb;
    var image_popup = option_image_popup;

    if(option_image){
      var option_image_split = option_image.split("|||");

      var option_image_thumb = option_image_split[0];
      var option_image_popup = option_image_split[1];

      if(option_image_thumb != "" && option_image_popup != ""){
        image_thumb = option_image_thumb;
        image_popup = option_image_popup;
      }
    }

    changeImage(image_thumb,image_popup);
  });
});




$(".option select").click(function() {
  $(".option-image-select option:selected" ).each(function() {
    var option_image = $(this).attr('rel');

    var image_thumb = option_image_thumb;
    var image_popup = option_image_popup;

    if(option_image){
      var option_image_split = option_image.split("|||");

      var option_image_thumb = option_image_split[0];
      var option_image_popup = option_image_split[1];

      if(option_image_thumb != "" && option_image_popup != ""){
        image_thumb = option_image_thumb;
        image_popup = option_image_popup;
      }
    }

    changeImage(image_thumb,image_popup);
  });
});







    $('.options input').click(function(){

    var option_image = $(this).attr('rel');
    var image_thumb = option_image_thumb;
    var image_popup = option_image_popup;


    if(option_image){
      var option_image_split = option_image.split("|||");

      var option_image_thumb = option_image_split[0];
      var option_image_popup = option_image_split[1];

      if(option_image_thumb != "" && option_image_popup != ""){
        image_thumb = option_image_thumb;
        image_popup = option_image_popup;
      }
    }

    changeImage(image_thumb,image_popup);

  });



}

Here's my php

<operation>
            <search position="before">
        <![CDATA[<input type="radio" name="option[<?php echo $option['product_option_id']; ?>]"]]>
      </search>
            <add>
        <![CDATA[
        <?php if(isset($option_value['option_image'])){?>
          <img src="<?php echo $option_value['option_image'];?>" border="0" alt="0" class="option-value-image optionimageimg" rel="<?php echo $option_value['option_image_thumb']."|||".$option_value['option_image_popup'];?>" />
        <?php } ?>
        ]]>
      </add>
        </operation>
        <operation>
            <search position="replace">
        <![CDATA[<input type="radio" name="option[<?php echo $option['product_option_id']; ?>]"]]>
      </search>
            <add>
         <![CDATA[<input type="radio" rel="<?php echo $option_value['option_image_thumb']."|||".$option_value['option_image_popup'];?>" name="option[<?php echo $option['product_option_id']; ?>]"]]>
      </add>
        </operation>
        <operation>
            <search position="replace">
        <![CDATA[<label for="option-value-<?php echo $option_value['product_option_value_id']; ?>"><?php echo $option_value['name']; ?>]]>
      </search>
            <add>
        <![CDATA[<label rel="<?php echo $option_value['option_image_thumb']."|||".$option_value['option_image_popup'];?>" for="option-value-<?php echo $option_value['product_option_value_id']; ?>"><?php echo $option_value['name']; ?>]]>
      </add>
        </operation>

Answer 1

Here are the changes you need to make. (Not promising everything will work on the first try; I may have missed something.)

---

Change 1:

In option_image.css,

change

.optionimageimg.active {

to

.optionimageimg.active,
.optionimageimg:hover {

---

Change 2:

In option_image.js,

remove or comment out

$(this).closest('.option.form-group').find('.optionimage img').removeClass('active');
$(this).addClass('active');

---

Change 3:

In option_image.js,

add this code

$(".optionimageimg").click(
    function () {
        //remove border from the one that currently has it
        $(".optionimageimg.active").removeClass("active");

        //add the border to this image
        $(this).addClass("active");
        }
    );