选择选项时无法更改变体图像

Question

我有一个 on change 功能，应该将图像更改为选定的变体图像，但我无法使其正常工作。这是html标记；

            {% for image in product.images %}
              <div class="single-product-image single-option-selector" {% if image.attached_to_variant? %} data-variant="{{ image.variants.first.id }}"{% endif %} style="{% if forloop.index > 1 %}display:none;{% endif %}">
                <img class="img-fluid lazyload"
                     src="{{ image.src | img_url: '1200x1200', crop: 'center' }}"
                     data-src="{{ image.src | img_url: '1200x1200', crop: 'center' }}"
                     alt="{{ image.alt | escape }}">
              </div>
            {% endfor %}

这是用于从 Shopify 中选择变体的选项选择器

        <select name="{{option_name}}" id="select-{{option_name}}" class="js-variant-id-image">
          <option class="js-variant-radio" value="placeholder" disabled {% if selected == false %}selected{% endif %}>Select {{ option.name }}</option>
            {% for value in option.values %}
              <option value="{{ value }}" {% if value == selected %}selected{% endif %} {% for variant in product.variants %} data-inventory-quantity="{{ variant.inventory_quantity }}"{% endfor %}>{{value}}</option>
            {% endfor %}
        </select>

这是应该改变图像的jquery函数

  $(document).ready(function(){
    $(document).on('change', '.js-variant-id-image', function(){
      let
        variant_id = this.value,
        variant_image = $('.single-product-image[data-variant="'+variant_id+'"]');

        console.log(variant_id);

      variant_image.show().siblings(":visible").hide();
    })
  });

Answer 1

您可以使用 $(".single-product-image").not(variant_image).hide() 隐藏所有不具有相同数据变量值的 div。另外，请确保选项的value 和data-variant 的值相同。

演示代码：

$(document).on('change', '.js-variant-id-image', function() {
  let
    variant_id = this.value,
    variant_image = $('.single-product-image[data-variant="' + variant_id + '"]');
  variant_image.show()
  //get all single div except the one which we need to show hide it
  $(".single-product-image").not(variant_image).hide()
})

.single-product-image {
  display: none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="{{option_name}}" id="select-{{option_name}}" class="js-variant-id-image">
  <option class="js-variant-radio" value="placeholder" disabled selected>Select one</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

<div class="single-product-image single-option-selector" data-variant="1" style="">1
  <img class="img-fluid lazyload" src="abc.png" data-src="1" alt="1">
</div>
<div class="single-product-image single-option-selector" data-variant="2" style="">2
  <img class="img-fluid lazyload" src="abc.png" data-src="1" alt="2">
</div>
<div class="single-product-image single-option-selector" data-variant="3" style="">3
  <img class="img-fluid lazyload" src="abc.png" data-src="1" alt="3">
</div>