将类从父 div 拆分和复制到相邻的 div（Liquid 或 jQuery）答案

【问题标题】：Split and copy classes from parent div to adjacent divs (Liquid or jQuery)将类从父 div 拆分和复制到相邻的 div（Liquid 或 jQuery）
【发布时间】：2016-01-28 15:43:50
【问题描述】：

我有以下代码，它使用了一些 Liquid 标记：

<div id="parent" class="grid-item {{ this.filters | downcase | replace: ' ', '-' | replace: ',', ' ' | replace: '/', '-' }}">
    <div class="labels">
        {{ this.filters | prepend: '<filter>' | replace: ',', '</filter><filter>' | append: '</filter>' }}
    </div>
</div>

我有以下过滤器（可以选择其中一个或全部）

情绪板
服装
设计师
造型
照片拍摄
合作
新闻/活动

假设“情绪板”、“设计师”、“协作”被选为过滤器......上面的液体标记将输出以下内容：

<div id="parent" class="grid-item mood-boards designers collaboration">
    <div class="labels">
        <filter>Mood Boards</filter>
        <filter>Designers</filter>
        <filter>Collaboration</filter>
    </div>
</div>

我需要它来输出这个：

<div id="parent" class="grid-item mood-boards designers collaboration">
    <div class="labels">
        <filter class="mood-boards">Mood Boards</filter>
        <filter class="designers">Designers</filter>
        <filter class="collaboration">Collaboration</filter>
    </div>
</div>

这在 Liquid 中是否可行（理想的解决方案）或失败，我们可以在 jQuery 中实现吗？你可以看到类的顺序总是与<filter>的顺序一致。

可能只选择了 1 个或所有上述过滤器，因此代码需要能够将类从 #parent 添加到适当的 <filter>'s。

请帮忙！很难描述，所以请询问您是否有问题或需要更多信息。

编辑：

我只是想如果你可以使用液体为每个可能的过滤器做这样的事情，但我无法让它工作：

<filter class="{{ this.filters[0] | downcase | replace: ' ', '-' | replace: ',', ' ' | replace: '/', '-' }}">
    {{ this.filters[0] }}
</filter>

<filter class="{{ this.filters[1] | downcase | replace: ' ', '-' | replace: ',', ' ' | replace: '/', '-' }}">
    {{ this.filters[1] }}
</filter>

【问题讨论】：

在上面添加了一个编辑。

标签： html liquid business-catalyst

【解决方案1】：

我假设您可以以数组或分隔字符串的形式获取所选项目。由于您没有使用非活动过滤器，我们可以忽略它们。

<!--Not sure how your data was coming in, but this 
    gets us to an iterable array:-->
{% assign rawActiveFilters = "Mood Boards,Designers,Collaboration" -%}
{% assign cats = rawActiveFilters | split: "," -%}

<!--catsJoined will be used outside the loop.-->
{% capture catsJoined -%}
    {% for cat in cats -%}
        {{ cat | downcase | replace: '/', '-' | replace: ' ', '-' -}}
    {% endfor -%}
{% endcapture -%}

<!--Remove those unsightly extra spaces. Not required, just preferred.-->
{% capture catsJoinedTidy -%}{{ catsJoined | split: ' ' | join: ' ' }}{% endcapture -%}

<div id="parent" class="grid-item {{ catsJoinedTidy }}">
    <div class="labels">
        {% for cat in cats -%}
            <filter class="{{ cat | downcase | replace: '/', '-' | replace: ' ', '-' }}">
                {{ cat }}
            </filter>
        {% endfor -%}
    </div>
</div>

【讨论】：

难以置信，正是我所需要的。您认为它是一个数组是正确的。您可以将： {% assign rawActiveFilters = "Mood Boards,Designers,Collaboration" -%} 替换为 {% assign rawActiveFilters = "{{filters}}" -%}

【解决方案2】：

我现在妥协并使用了以下内容。不幸的是，这并不理想，因为如果过滤器名称发生变化，它们不会在此处自动更改。

{% if this.filters contains "Mood Boards" -%}
    <filter class="mood-boards">Mood Boards</filter>
{% endif -%}

{% if this.filters contains "Outfits" -%}
    <filter class="outfits">Outfits</filter>
{% endif -%}

{% if this.filters contains "Designers" -%}
    <filter class="designers">Designers</filter>
{% endif -%}

{% if this.filters contains "Styling" -%}
    <filter class="styling">Styling</filter>
{% endif -%}

{% if this.filters contains "Photo Shoots" -%}
    <filter class="photo-shoots">Photo Shoots</filter>
{% endif -%}

{% if this.filters contains "Collaboration" -%}
    <filter class="collaboration">Collaboration</filter>
{% endif -%}

{% if this.filters contains "News/Events" -%}
    <filter class="news-events">News/Events</filter>{
% endif -%}

【讨论】：