javascript - 单击图像向多个 Div 添加和删除类

Question

我有四种颜色显示为带有图像的单选按钮。如果单击彩色图像，我会尝试获取彩色图像 ID 并将其作为类添加到多个 div 元素。

它正在工作，但它只是在单击图像时添加每个图像的类(基本上是附加)，我想做的是如果单击图像只添加该图像的 id 作为类，如果一个单击更多图像，删除现有图像类和新图像类。

这是我的代码

HTML

<ul id="thumbnails1" class="noul swatch-colors">
<li><label class="lbswatches"><input class="rcolor" name="swatch_color" value="Cherry Red" type="radio"><img src="https://image.ibb.co/mZnrqa/g500_antique_cherry_red_color.jpg" id="CherryRed" class="full swatch-img" alt="Cherry Red" title="Cherry Red" width="32" height="32"></label></li>
<li><label class="lbswatches"><input class="rcolor" name="swatch_color"  value="Irish Green" type="radio"><img src="https://image.ibb.co/cuJLiv/g500_antique_irish_green_color.jpg" id="IrishGreen" class="full swatch-img" alt="Irish Green" title="Irish Green" width="32" height="32"></label></li>
<li><label class="lbswatches"><input class="rcolor" name="swatch_color" value="Jade Dome" type="radio"><img src="https://image.ibb.co/eVABqa/g500_antique_jade_dome_color.jpg" id="JadeDome" class="full swatch-img" alt="Jade Dome" title="Jade Dome" width="32" height="32"></label></li>
<li><label class="lbswatches"><input class="rcolor" name="swatch_color" value="Orange" type="radio"><img src="https://image.ibb.co/jGR6Ov/g500_antique_orange_color.jpg" id="Orange" class="full swatch-img" alt="Orange" title="Orange" width="32" height="32"></label></li>
</ul>
<h2 id="colorselected"></h2>
<br /><br /><br />
<div class="adult-section-box">
 <div class="pc-row">
 <ul class="quote-sizes adult-sizes noul pc-col">
<li><label><span>Adult Small</span><input id="adult_s" type="text" name="adult_s" data-var="adult_s" class="amtbox" placeholder="quanity" /></label></li>
      <li><label><span>Adult Medium</span><input id="adult_m" type="text" name="adult_m" data-var="adult_m" class="amtbox" placeholder="quanity" /></label></li>
      <li><label><span>Adult Large</span><input id="adult_l" type="text" name="adult_l" data-var="adult_l" class="amtbox" placeholder="quanity" /></label></li>
    </ul>
 </div>
 </div>
<br /><br /><br />
<div class="youth-section-box">
 <div class="pc-row">
 <ul class="quote-sizes youth-sizes noul pc-col">
 <li><label><span>Youth X Small</span><input id="youth_xs" type="text" name="youth_xs" data-var="youth_xs" class="amtbox" placeholder="quanity" /></label></li>
      <li><label><span>Youth Small</span><input id="youth_s" type="text" name="youth_s" data-var="youth_s" class="amtbox" placeholder="quanity" /></label></li>
      <li><label><span>Youth Medium</span><input id="youth_m" type="text" name="youth_m" data-var="youth_m" class="amtbox" placeholder="quanity" /></label></li>
    </ul>
 </div>
 </div>

jQuery

document.querySelectorAll('[name=swatch_color]')[0].checked = true;
    $('#thumbnails1').delegate('img','click', function(){
         $(this).closest('ul').find('.rcolor').attr('checked',false);
       $(this).prev().attr('checked',true);
       $("#colorselected").val($(this).attr("alt"));
       var imgid = this.id;
        $(".adult-section-box .pc-row, .youth-section-box .pc-row").addClass(imgid);           
   });

这是我的 jFiddle demo

谢谢

Answer 1

您可以使用 jQuery#attr 重置所有这些东西div的属性。

    $(".full.swatch-img").on('click',function(){

        let colorCode = $(this).attr('id');

        $(".adult-section-box .pc-row, .youth-section-box .pc-row")
        .attr('class',colorCode+" pc-row");

    })

已更新 fiddle