Question

单击时会出现图像更改代码。

        <div class="product-image">
           <img itemprop="image" id="productimage" src="{{product.first_image.large_url}}" style="width: 100%" title="{{product.title}}">
        </div>  
        {% if product.images.size > 1 %}
        <div class="gallery">
        {% for image in product.images %}
           <a href="#" onclick="document.getElementById('productimage').src='{{image.original_url}}'" style="background: url({{image.medium_url}}) center center no-repeat; background-size: 100%;" title="{{ product.title | escape }}"></a>
        {% endfor %}	
        </div>
        {% endif %}

（Liquid上的在线商店）

在选择选择器（修改）时，有一个用于更改商品图像的代码。

<script type="text/javascript">
  $('.single-option-selector').change(function() {
    return imgchange($(this).find(':selected').text());
  });
</script>

我无法理解如何将JS和函数OnClick联系起来。我在Javascript中很弱。我试图在选择器本身中实现OnClick函数。这些都没有成功。请帮助理解。

我的选择码：

              {% if product.show_variants? %}
              <hr>
              <select name="variant_id" data-product-variants>
			  {% for variant in product.variants %}
                {% if variant.quantity > 0 %}
			    <option name="variant_id" id="variant-select" value="{{ variant.id }}">{{ variant.title | escape }}</option>
                {% else %}
			    <option name="variant_id" id="variant-select" value="{{ variant.id }}">{{ variant.title | escape }} (OUT)</option>                
                {% endif %}
			  {% endfor %}
			  </select>
              {% endif %}

对不起，我甚至不明白我需要做什么。

Answer 1

尝试看看你是否可以点击下拉列表。它应弹出一个警告对话框

$('select').on('change', function() {
  alert( this.value );
})

Answer 2

我先给你一个建议。我认为您应该声明您的更改功能：

togglebutton()

它在DOM准备就绪时设置更改事件。

其余的@ Monkey_Dev1400有一个好点

选择修改时更改图像

2 个答案: