Javascript 如何分解并一次仅显示三个变体中的一个？

我希望使用选项卡构建一个多步骤的产品选择器。我希望在每个选项卡上显示变量，但找不到一种方法来分解变量以单独显示它们

我曾多次尝试发布下面的代码（每个选项卡中都有一个），但这会使每个选择都“卡住”。是的，我知道这会导致问题，但我只是想让代码正常工作

        <div class="product-size  option-{{ option | handle }} {{ product_options }}">
            <span class="option-label">{{ option }}:</span>
            <div class="select-wrapper-sm">
                <select class="form-control input-sm size-variants">
                    {% for name in option_names %}
                        <option {% if selected_value == name %}selected="selected"{% endif %} value="{{ name | handle | downcase | escape }}">{{ name }}</option>
                    {% endfor %}
                </select>
            </div>
            {% if product_options == 'swatches' %}
                <ul class="{% if option_title contains 'color' %}color-list{% else %}size-list{% endif %}" data-index="{{ forloop.index0 }}">
                    {% for name in color_image %}
                        {%- assign title = name | split:':' | first | replace:'!__!','' -%}
                        {%- assign img_src = name | split:':' | last -%}
                        <li  {% if selected_value == title %}class="active"{% endif %}>
                            {% if option_title contains 'color' %}<a href="#" data-tooltip="{{ title }}" data-placement="top" title="{{ title }}" data-value="{{ title | handle | escape }}" data-image="{{ img_src }}"><span class="value"><img src="{% if settings.product_previews_colors_variants %}{{ img_src }}{% else %}{{ title | handle | prepend:'color-' | append: '.png' | file_url | downcase }}{% endif %}" alt=""></span></a>{% else %}<a href="#" data-value='{{ title | handle | downcase | escape }}'><span class="value">{{ title | escape }}</span></a>{% endif %}
                        </li>
                    {% endfor %}
                </ul>
            {% endif %}
        </div>

在那里，我可以看到这段代码显示了变量，但我不知道如何分解每个变量，以便能够单独显示它们

        <div class="product-size  option-{{ option | handle }} {{ product_options }}">
            <span class="option-label">{{ option }}:</span>
            <div class="select-wrapper-sm">
                <select class="form-control input-sm size-variants">
                    {% for name in option_names %}
                        <option {% if selected_value == name %}selected="selected"{% endif %} value="{{ name | handle | downcase | escape }}">{{ name }}</option>
                    {% endfor %}
                </select>
            </div>
            {% if product_options == 'swatches' %}
                <ul class="{% if option_title contains 'color' %}color-list{% else %}size-list{% endif %}" data-index="{{ forloop.index0 }}">
                    {% for name in color_image %}
                        {%- assign title = name | split:':' | first | replace:'!__!','' -%}
                        {%- assign img_src = name | split:':' | last -%}
                        <li  {% if selected_value == title %}class="active"{% endif %}>
                            {% if option_title contains 'color' %}<a href="#" data-tooltip="{{ title }}" data-placement="top" title="{{ title }}" data-value="{{ title | handle | escape }}" data-image="{{ img_src }}"><span class="value"><img src="{% if settings.product_previews_colors_variants %}{{ img_src }}{% else %}{{ title | handle | prepend:'color-' | append: '.png' | file_url | downcase }}{% endif %}" alt=""></span></a>{% else %}<a href="#" data-value='{{ title | handle | downcase | escape }}'><span class="value">{{ title | escape }}</span></a>{% endif %}
                        </li>
                    {% endfor %}
                </ul>
            {% endif %}
        </div>

{{option}}：
{%用于选项_names%}中的名称
{{name}}
{%endfor%}
{%if product_options=='swatches%}

{%用于彩色图像中的名称%}
{%-assign title=name | split:'：'| first | replace:'！|！'，'-%}
{%-assign img_src=name | split:'：'| last-%}

{%if选项\标题包含“颜色”%}{%else%}{%endif%}

{%endfor%}

{%endif%}

感谢您的帮助。我正在寻找只是刹车他们了，这样我就可以样式他们与标签单独。我可以通过多学习来应付剩下的一切。这让我很难堪

我能够找到这段代码，输出我需要的东西，但我似乎无法让它们成为可点击的选项

{% for option in product.options %}
{% if option == 'Size' %}

 {% assign index = forloop.index0 %}
 {% assign sizelist = '' %}
 {% assign size = '' %}

 {% for variant in product.variants %}

    {% capture size %}
    {{ variant.options[index] }}
    {% endcapture %}

    {% unless sizelist contains size %}

       <span>{{ size }}</span>

       {% capture tempList %}
          {{sizelist | append: size | append: ' '}}
       {% endcapture %}
          {% assign sizelist = tempList %}
       {% endunless %}

{% endfor %}
{% endif %}
{% endfor %}

{%for product.options%}
{%if选项=='大小'%}
{%assign index=forloop.index0%}
{%assign sizelist=''%}
{%assign size=''%}
{product.variants%中的变量为%0}
{%capture size%}
{{variant.options[index]}
{%endcapture%}
{%除非sizelist包含大小%}
{{size}}
{%capture templast%}
{{sizelist | append:size | append:''}
{%endcapture%}
{%assign sizelist=tempList%}
{%end除非%}
{%endfor%}
{%endif%}
{%endfor%}

您可以通过product.variants对象使用循环：

{% for variant in product.variants %}
What you need to do with variant.
{% endfor %}

---

我用你贴的东西搜索了一下。我能够找到一些代码来输出我需要的信息，但我似乎无法使它们可点击。有什么想法吗？我编辑了原始文章，以显示我在文章末尾找到的代码。

{% for option in product.options %}
{% if option == 'Size' %}

 {% assign index = forloop.index0 %}
 {% assign sizelist = '' %}
 {% assign size = '' %}

 {% for variant in product.variants %}

    {% capture size %}
    {{ variant.options[index] }}
    {% endcapture %}

    {% unless sizelist contains size %}

       <span>{{ size }}</span>

       {% capture tempList %}
          {{sizelist | append: size | append: ' '}}
       {% endcapture %}
          {% assign sizelist = tempList %}
       {% endunless %}

{% endfor %}
{% endif %}
{% endfor %}

{% for variant in product.variants %}
What you need to do with variant.
{% endfor %}