Shopify部分中的forloop.index问题[关闭]答案

【问题标题】：Issue with forloop.index in Shopify Section [closed]Shopify部分中的forloop.index问题[关闭]
【发布时间】：2019-12-07 07:46:02
【问题描述】：

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

我的 HTML/液体：

<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');

【问题讨论】：

我不认为你的 javascript 是相关的 tbh，包含你的设置架构可能会更好。

标签： loops iteration shopify liquid

【解决方案1】：

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

话虽如此，使用您现有的代码，您可以做到这一点（假设您的设置数据中始终有相同数量的标题和内容块，并且它们在拖放编辑器中的顺序正确）：

<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>

【讨论】：