选择变体后更改特色图片的问题

Question

我已按照this教程进行操作，以便通过单击缩略图来选择一个变体。在使用平板电脑时，我不得不对其进行一些修改，以弥补丢失的selectCallback function。 一切正常，但是我的问题是，精选图片不会根据所选变体而改变。

我的代码如下：

<div class="modal quickview-modal" id="quickViewModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <div class="grid">
            <button type="button" class="close quickview-close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">{% include 'small-cross' %}</span>
            </button>
          </div>
            <div data-section-id="{{ section.id }}" data-section-type="product" data-enable-history-state="true" itemscope itemtype="http://schema.org/Product">

              {%- assign current_variant = product.selected_or_first_available_variant -%}
              {%- assign featured_image = current_variant.featured_image | default: product.featured_image -%}
              <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                <link itemprop="availability" href="http://schema.org/{% if current_variant.available %}InStock{% else %}OutOfStock{% endif %}">
                                <form action="/cart/add" method="post" enctype="multipart/form-data">
<div class="grid">
  <div class="grid__item medium-up--one-half">
              {% if product.images.size > 0 %}
                  {% for image in product.images limit: 1 %}
                    <div>
                      <a href="{{ image.src | img_url: 'medium' }}" data-product-single-thumbnail>
                        <img src="{{ image.src | img_url: 'medium' }}" alt="{{ image.alt | escape }}">
                      </a>
                    </div>
                  {% endfor %}
              {% endif %}
</div>
  <div class="grid__item medium-up--one-half">
              <p class="quickview-title">{{ product.title }}</p>
              <div data-price-wrapper>
                <span class="quickview-title" data-product-price>
                  {{ current_variant.price | money }}
                </span>

                {% if product.compare_at_price_max > product.price %}
                  <span class="visually-hidden" data-compare-text>{{ 'products.product.regular_price' | t }}</span>
                  <s data-compare-price>
                    {% if current_variant.compare_at_price > current_variant.price %}
                      {{ current_variant.compare_at_price | money }}
                    {% endif %}
                  </s>
                {% endif %}
              </div>

              <p class="quickview-label">Quantity</p>
                <div class="cart-quantity">
        <input type='button' value='-' class='qtyminus' field='updates_{{ item.id }}' />
        <input name="updates2[]" id="updates_{{ item.id }}" class="quantity" value="1" min="1" />
        <input type='button' value='+' class='qtyplus' field='updates_{{ item.id }}' />
    </div>


                  {% unless product.has_only_default_variant %}
                    {% for option in product.options_with_values %}
                      <div class="selector-wrapper js">
                        <label for="SingleOptionSelector-{{ forloop.index0 }}">
                            <p class="quickview-title">{{ option.name }}</p>
                        </label>

                        <select
                          id="SingleOptionSelector-{{ forloop.index0 }}"
                          class="single-option-selector"
                          data-single-option-selector
                          data-index="option{{ option.position }}">
                          {% for value in option.values %}
                            <option
                              value="{{ value | escape }}"
                              {% if option.selected_value == value %}selected="selected"{% endif %}>
                                {{ value }}
                            </option>
                          {% endfor %}
                        </select>
                      </div>
     {% include 'swatch' with 'Color' %}
                    {% endfor %}
                  {% endunless %}

                  <select name="id" class="no-js" data-product-select>
                    {% for variant in product.variants %}
                      <option
                        {% if variant == current_variant %}selected="selected"{% endif %}
                        {% unless variant.available %}disabled="disabled"{% endunless %}
                        value="{{ variant.id }}">
                          {{ variant.title }}
                      </option>
                    {% endfor %}
                  </select>

                {% if product.available %}
                   <p class="stock-message">In Stock</p>
                {% endif %}

              {% unless product == empty %}
                <script type="application/json" data-product-json>
                  {{ product | json }}
                </script>
              {% endunless %}
                                                    </div>


            </div>

          <div class="quickview-btn-container">
            <div class="add-btn-container">
                  <button
                    class="btn view-product add-to-cart-main"
                      type="submit"
                      name="add"
                      data-add-to-cart
                      {% unless current_variant.available %}disabled="disabled"{% endunless %}>
                        <span data-add-to-cart-text>
                          {% if current_variant.available %}
                            {{ 'products.product.add_to_cart' | t }}
                          {% else %}
                            {{ 'products.product.sold_out' | t }}
                          {% endif %}
                        </span>
                    </button>
                  </div>
                </div>
          </form>
          </div>
        </div>
  </div>
</div>
</div>
</div>

JS

  /**
     * Event handler for when a variant input changes.
     */
    _onSelectChange: function() {
      var variant = this._getVariantFromOptions();

      this.$container.trigger({
        type: 'variantChange',
        variant: variant
      });

      if (!variant) {
        return;
      }

      this._updateMasterSelect(variant);
      this._updateImages(variant);
      this._updatePrice(variant);
      this.currentVariant = variant;

      if (this.enableHistoryState) {
        this._updateHistoryState(variant);
      }
      // BEGIN SWATCHES
if (variant) {
  var form = $('#' + selector.domIdPrefix).closest('form');
  for (var i=0,length=variant.options.length; i<length; i++) {
    var radioButton = form.find('.swatch[data-option-index="' + i + '"] :radio[value="' + variant.options[i] +'"]');
    if (radioButton.size()) {
      radioButton.get(0).checked = true;
    }
  }
}
// END SWATCHES
    },

    /**
     * Trigger event when variant image changes
     *
     * @param  {object} variant - Currently selected variant
     * @return {event}  variantImageChange
     */
    _updateImages: function(variant) {
      var variantImage = variant.featured_image || {};
      var currentVariantImage = this.currentVariant.featured_image || {};

      if (!variant.featured_image || variantImage.src === currentVariantImage.src) {
        return;
      }

      this.$container.trigger({
        type: 'variantImageChange',
        variant: variant
      });
    },

    /**
     * Update hidden master select of variant change
     *
     * @param {object} variant - Currently selected variant
     */
    _updateMasterSelect: function(variant) {
      $(this.originalSelectorId, this.$container)[0].value = variant.id;
    }
  });

  return Variants;
})();

  $(function() {
    $('.swatch :radio').change(function() {
      var optionIndex = $(this).closest('.swatch').attr('data-option-index');
      var optionValue = $(this).val();
      $(this).closest('form').find('.single-option-selector').eq(optionIndex).val(optionValue).trigger('change');
    });
  });

有人可以发现代码有什么问题吗？