Shakila Reed-Southerland Shakila Reed-Southerland - 4 months ago 12
Javascript Question

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

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

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");
        }
    );
Comments