選擇修改時更改圖片

-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

選擇修改時更改圖片

回答

相關問題