Shopify 部分中的 forloop.index 问题

Question

我正在处理 Shopify 中的动态选项卡部分，但遇到了问题。我创建了两个循环，一个用于选项卡的 href 标记，第二个用于关联的内容元素。我需要前者来引用后者，但在我当前的代码中，href 标签中的输出显示 1 或 2，但在标签内容中，它们从 3 开始。请帮助我！

我的HTML/Liquid:

<ul class="tabs-nav">
  {%- for block in section.blocks -%}
    {% if block.type == 'tab-title' %}
      <li class="tab-active">
        <a href="#tab-{{ forloop.index | plus: 1 }}">
          {{ block.settings.serv_title }}
        </a>
      </li>
    {% endif %}
  {%- endfor -%}
</ul>
<div class="tabs-stage">
  {%- for block in section.blocks -%}
    {% if block.type == 'tab-content' %}
      <div id="tab-{{ forloop.index }}" style="display: block;">
        {{ block.settings.serv_cont }}
      </div>
    {% endif %}
  {%- endfor -%}
</div>

我的JavaScript:

$('.tabs-nav a').on('click', function (event) {
  event.preventDefault();
  $('.tab-active').removeClass('tab-active');
  $(this).parent().addClass('tab-active');
  $('.tabs-stage div').hide();
  $($(this).attr('href')).show();
});
$('.tabs-nav a:first').trigger('click');

Answer 1

我认为问题出在您的设置架构的结构上。听起来您目前分别拥有标题块和内容块的架构（并且使用您当前的配置设置数据，您总共有四个块。）您可以改为拥有一个块的架构，其中包含相关的标题和内容。然后你只需要使用一个 for 循环（虽然你必须捕获标题，捕获内容，并将每个输出到你的 HTML 中......

也就是说，使用您现有的代码，您可以做到这一点（假设您的设置数据中始终有相同数量的标题和内容块，并且它们在 drag/drop 编辑器中的顺序正确):

<ul class="tabs-nav">
  {%- assign titleIndex = 0 -%}
  {%- for block in section.blocks -%}
    {% if block.type == 'tab-title' %}
      {%- assign titleIndex = 0 | plus: 1 -%}
      <li class="tab-active">
        <a href="#tab-{{ titleIndex }}">
          {{ block.settings.serv_title }}
        </a>
      </li>
    {% endif %}
  {%- endfor -%}
</ul>
<div class="tabs-stage">
  {%- assign contentIndex = 0 -%}
  {%- for block in section.blocks -%}
    {% if block.type == 'tab-content' %}
      {%- assign contentIndex = 0 | plus: 1 -%}
      <div id="tab-{{ contentIndex }}" style="display: block;">
        {{ block.settings.serv_cont }}
      </div>
    {% endif %}
  {%- endfor -%}
</div>

Shopify 部分中的 forloop.index 问题

Issue with forloop.index in Shopify Section

iteration

loops

liquid

shopify