选中/单击jquery addclass（）removeclass（）开/关

Question

因此，在过去的几周里，我一直在努力让这段代码正确。我有一个标准产品页面的服装网站。在这个产品页面上我有选项图像（蓝色标签有蓝色图像，红色标签有红色图像等）我这段代码是

<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>

我面临的问题是添加一个类

.optionimageimg.active {

border-color：#ffbcbc;

}

单击图像后

到图像。我找到解决方案的壁橱是

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

然而，这并不是我想要的。一旦点击，它将成功地将边框添加到产品图像，但如果将鼠标悬停在其他产品图像上，则会删除边框。

我想要的是边框实际上保留在点击的图像上，直到另一个图像被点击而不是悬停在上面。如果那是有道理的。

示例：

图像A仅在悬停时未选定的边框 图像B选中，边框保持不变，直到单击不同的图像 图像C未选中，仅在悬停时为边框

如果您需要查看目前的工作原理，可以点击指向我的某个产品页面的链接（颜色部分下方的圆圈选项）

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

谢谢，

这是找到我的javascript代码的完整代码

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);

  });



}

这是我的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>