Twig比较运算符行为异常：Symfony模板锚点类添加问题排查

一、第一段代码仅首个元素生效的原因 #

你的第一段代码中的判断条件是：

(colorData[keys] is defined and colorData[keys]['code'] == c.hexcode) ? ' selected':''

出现仅首个元素生效的情况，大概率是以下原因之一：

• 格式/类型不匹配：colorData[keys]['code']和c.hexcode的格式不一致，比如一个带#前缀一个不带，或者大小写不同（Twig的==运算符是区分大小写的）。例如c.hexcode是#FF0000，而colorData里的code是ff0000，此时==会判定不相等。
• colorData的键与循环keys不对应：循环中的keys是colors数组的键，但colorData的键并非与之匹配，导致后续循环中colorData[keys]未定义，条件不满足。比如colors的键是字符串"red"、"blue"，但colorData的键是数字索引0、1，那除了第一个匹配的情况外，其他colorData[keys]都不存在。
• colorData仅包含首个元素的匹配数据：如果colorData里只有第一个keys对应的项的code等于c.hexcode，那自然只有第一个元素会添加selected类。

二、第二段代码添加错误元素的原因 #

你修改后的条件是：

(colorData[keys] is defined and colorData[keys]['code'] in colors | keys) ? ' selected':''

这里的核心问题是colors | keys获取的是colors数组的键列表（比如如果colors是索引数组，就是[0,1,2]；如果是关联数组，就是对应的键名）。这个条件判断的是colorData[keys]['code']是否属于colors的键集合，而不是判断当前颜色是否被选中。

举个例子：如果colors的键是0、1、2，只要colorData[keys]['code']是0、1或2中的任意一个，就会添加selected类——这完全和颜色的hexcode无关，自然会给错误的元素加上类。

三、正确的实现方式 #

假设你的需求是：当当前循环的颜色c.hexcode存在于colorData的code字段中时，添加selected类。可以用Twig的map过滤器先提取所有选中的code，再用in判断：

{% if colors is defined and colors is not empty %}
    {% for keys, c in colors %}
        <li>
            <a 
                id="{{ keys }}" 
                data-rel="tooltip" 
                data-placement="top" 
                title="{{ c.color|capitalize }}" 
                class="picker-btn{{ (c.hexcode in colorData|map(item => item.code)) ? ' selected':'' }}" 
                style="background: {{ c.hexcode }}" 
                data-color-id="{{ c.id }}" 
                data-color-text="{{ c.color }}" 
                data-color-code="{{ c.hexcode }}"
            ></a>
        </li>
    {% endfor %}
{% endif %}

如果colorData是单个对象（而非数组），比如你要匹配的是colorData.code是否等于c.hexcode，那条件可以简化为：

class="picker-btn{{ (colorData is defined and colorData.code == c.hexcode) ? ' selected':'' }}"

另外，如果你需要忽略大小写或#前缀的差异，可以统一格式后再比较，比如：

{# 统一转为小写并去掉#前缀 #}
{% set currentHex = c.hexcode|replace({'#':''})|lower %}
{% set targetHex = colorData[keys]['code']|replace({'#':''})|lower %}
class="picker-btn{{ (colorData[keys] is defined and currentHex == targetHex) ? ' selected':'' }}"

内容的提问来源于stack exchange，提问作者aknessy