选择修改时更改图片

-1

 <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 %} \t 
 
     </div> 
 
     {% endif %}

（对液在线商店）

而且存在用于选择的选择器（变形例）时改变商品的图像的代码。

<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> 
 
\t \t \t {% for variant in product.variants %} 
 
       {% if variant.quantity > 0 %} 
 
\t \t \t  <option name="variant_id" id="variant-select" value="{{ variant.id }}">{{ variant.title | escape }}</option> 
 
       {% else %} 
 
\t \t \t  <option name="variant_id" id="variant-select" value="{{ variant.id }}">{{ variant.title | escape }} (OUT)</option>     
 
       {% endif %} 
 
\t \t \t {% endfor %} 
 
\t \t \t </select> 
 
       {% endif %}

对不起，我甚至不知道我要问，这样做什么。

来源

2017-10-17 Xhonor

所以改变下拉的值会改变IMG？你只是想触发这个变化？ –

@ Monkey_Dev1400是的。是。是! – Xhonor

试试看看是否可以打开下拉菜单。它应该弹出一个警告对话框

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

来源

2017-10-17 13:39:36

我有一个建议先给你。我想你应该声明的更改功能是这样的：

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

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

其余的@ Monkey_Dev1400有一个好点

来源

2017-10-17 15:53:01

选择修改时更改图片

回答

相关问题