jquery 添加类() 移除类() on/off selected/clicked

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>

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

.optionimageimg.active {

边框颜色：#ffbcbc；

}

单击图像后转到图像。我得出的解决方案是

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

但是，这不是我想要的。单击后它会成功将边框添加到产品图片，但如果您将鼠标悬停在不同的产品图片上，则会删除边框。

我想要的是边框实际保留在单击的图像上，直到单击另一个图像而不是悬停在其上。如果那有意义。

示例：

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

这里是 link 我的产品页面之一，如果您需要查看它当前的工作方式（颜色部分下方的圆圈选项）

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>

Answer 1

以下是您需要进行的更改。（不保证第一次尝试一切都会成功；我可能错过了一些东西。）

变化一：

在option_image.css,

改变

.optionimageimg.active {

到

.optionimageimg.active,
.optionimageimg:hover {

变化2：

在option_image.js,

删除或注释掉

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

变化3：

在option_image.js,

添加此代码

$(".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");
        }
    );

jquery 添加类() 移除类() on/off selected/clicked

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

jquery

addclass

removeclass