Shopify（液體）以選擇和更改樣式計數選項的大小

Question

我可以通過圖像選擇選項： http : //www.raues.com/products/copy-of-black-and-blue-glasses-top

我想計算每個選項中的圖像數量，然后根據該數量更改圖像的樣式（寬度）。 我發現此代碼可以計算選擇輸入的大小：

document.querySelector（“＃{{settings.option1_title}}”）。length;

所以我做了以下事情：

<script type="text/javascript"> 
               var len = document.querySelector("#{{settings.option1_title}}").length;

{% if len < 10) %}

<style>
ul.thumbnails.image_picker_selector li {
  max-width: 160px; }
</style>

{% endif %}               

</script>

但這行不通。 我認為Liquid不會讀取我之前創建的“ len”變量，並且如果語句為true，我不確定這是否是將樣式添加到代碼中的正確方法。

非常感謝您的幫助。

Answer 1

Liquid首先在服務器端呈現，而javascript在客戶端運行（ 請參閱此處 ）。

因此，在對if語句{% if len < 10 %}進行求液時，您的javascript len變量不存在。 請在此處使用javascript if語句。