树枝比较运算符表现不佳

Question

Am trying to add a certain class to an anchor element if a given condition is met using symfony's twig templating engine, The following piece of code is being used in an attempt to achieve this:

{% 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{{ (colorData[keys] is defined and colorData[keys]['code'] == c.hexcode) ? ' selected':'' }}" style="background: {{ c.hexcode }}" data-color-id="{{ c.id }}" data-color-text="{{ c.color }}" data-color-code="{{ c.hexcode }}"></a>
</li>
{% endfor %}
{% endif %}

The above code adds the selected class rightfully, to just the first anchor element even when I expect to have 3 anchor elements assigned this class:

{% 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{{ (colorData[keys] is defined and colorData[keys]['code'] in colors | keys) ? ' selected':'' }}" style="background: {{ c.hexcode }}" data-color-id="{{ c.id }}" data-color-text="{{ c.color }}" data-color-code="{{ c.hexcode }}"></a>
</li>
{% endfor %}
{% endif %}

The second code fragment adds the selected class to 3 anchor elements because however you wish to look at it, colorData[keys]['code']has keys that exist in the colors array even if the class isn't being added to the right anchor elements. My question is this; if the comparison operator (==) returns true for matched variable values why isn't the first code fragment working? and why is the second code fragment adding this class to the wrong anchor elements?

A snapshot of the colorData array is shown below:

That of the colors array is thus:

Answer 1

About the first example you're comparing:

1. "#FFFFFF" == "#FFFFFF"
2. "#222222" == "#795548"
3. "#01579b" == "#3e2723"

and after this comparsion it finishes 3 times in condition colorData[keys] is defined. What you can do here is to add one more loop.

{% if colors is defined and colors is not empty %}
{% for keys, c in colors %}
<li>
   {% set isColorInColorData = false %}
   {% for exactColor in colorData %}
        {% if exactColor.code == c.hexcode %}
             {% set isColorInColorData = true %}
        {% endif %}                
   {% endfor %}

   <a id="{{ keys }}" data-rel="tooltip" data-placement="top" title="{{ c.color|capitalize }}" class="picker-btn{{ isColorInColorData ? ' selected':'' }}" style="background: {{ c.hexcode }}" data-color-id="{{ c.id }}" data-color-text="{{ c.color }}" data-color-code="{{ c.hexcode }}"></a>
</li>
{% endfor %}
{% endif %}

Looking to the second example you're comparing a string with an integer.

1. "#FFFFFF" in [0,1,2]
2. "#222222" in [0,1,2]
3. "#01579b" in [0,1,2]

Note that "#FFFFFF" is "equal"(==) to 0 in php!!

So you have to really concentrate on what are you comparing. In twig there is no === operator.