Question

所以我有一个产品有2个选项选择，一个用于颜色，一个用于尺寸。我有一些jQuery克隆div.option_trigger中选择的大小选项。问题是如果我点击颜色选项，尺寸内的所有选项都会改变，包括选择的选项。所以我希望克隆的元素在选择新选项时更新。

颜色选择器：

<div class="custom-swatch color">
  <!-- Selected color -->
  <div class="swatch-color selected"> 
    <input id="swatch-0-nightfall-blue-10963197379" type="radio" name="option-0" value="Nightfall Blue"> 
    <div data-value="Nightfall Blue" class="swatch-element color nightfall-blue-swatch"></div>
  </div>
  <div class="swatch-color"> 
    <input id="swatch-0-phoenix-blue-10963197379" type="radio" name="option-0" value="Phoenix Blue"> 
    <div data-value="Phoenix Blue" class="swatch-element color phoenix-blue-swatch soldout"></div>
  </div>
</div>

根据所选尺寸克隆此标签，并在颜色选择更改所选尺寸后需要更新：

<div class="option_trigger">
  <!-- This label gets updated depending on the size selection, and needs to be updated after the color selection change the size selected-->
  <label class="soldout">Medium</label>
</div>

这些样本大小的选项会根据所选颜色而变化，从而可以使用其他尺寸，其他尺寸则售罄：

<div class="custom-swatch size">
  <!-- These swatch-size options change depending on the color selected, making some sizes available and others soldout --> 
  <div class="swatch-size"> 
    <input id="swatch-1-2x-large-10963197379" type="radio" name="option-1" value="2X-Large" checked=""> 
    <div data-value="2X-Large" class="swatch-element 2x-large-swatch soldout"> 
      <label class="swatch-label soldout" for="swatch-1-2x-large-10963197379">2X-Large</label>
    </div>
  </div> 
  <div class="swatch-size"> 
    <input id="swatch-1-large-10963197379" type="radio" name="option-1" value="Large"> 
    <div data-value="Large" class="swatch-element large-swatch"> 
      <label class="swatch-label" for="swatch-1-large-10963197379">Large</label>
    </div>
  </div>
  <!-- The label inside this selected swatch is the one that gets cloned into div.optio_trigger--> 
  <div class="swatch-size selected"> 
    <input id="swatch-1-medium-10963197379" type="radio" name="option-1" value="Medium"> 
    <div data-value="Medium" class="swatch-element medium-swatch soldout"> 
      <label class="swatch-label soldout" for="swatch-1-medium-10963197379">Medium</label>
    </div>
  </div>
</div>

这是我写的克隆选择大小的jQuery（这里的一切都很好）

$('.custom-swatch.size > .swatch-size > input').each(function(){
  $(this).change(function(){
    var lab = $(this).next().children(); //This is the label selected
    var trigg = $(this).parent().parent().prev(); //This is the div.option_trigger
    $(this).parent().siblings().removeClass('selected');
    $(trigg).append($(lab).clone().removeClass('swatch-label').removeAttr('for'));
    $(trigg).children().last().prevAll().remove();
  });
});

这就是我尝试在颜色更改后克隆标签元素以及所选标签更新后的操作。但是没有用，我在其他地方找到了这种方法，但这是不正确的。

$('.swatch-color > input').change(function() {
  $('div.custom-swatch.size > div.swatch-size.selected > div').trigger('updatecomplete');
});
$('div.custom-swatch.size > div.swatch-size.selected > div').on('updatecomplete', function() {
  var labc = $(this).children();
  var trigc = $(this).parent().parent().prev();
  $(trigc).append($(labc).clone().removeClass('swatch-label').removeAttr('for'));
  $(trigc).children().last().prevAll().remove();
});

DOM更改后运行函数

0 个答案: