Не могу закрыть div

Question

Так что по какой-то причине этот маленький скрипт выдает небольшую ошибку во внешнем интерфейсе (он не выдает ошибку во внутреннем интерфейсе).Итак, ниже я указал 3 варианта цвета.Все отлично работают во внешнем интерфейсе, но если вы находитесь на странице продукта с последним указанным цветом (в данном случае зеленым), URL-адрес, указанный для этого div, не закроется после div, но будет продолжен в div ниже.Таким образом, каждый div ниже будет иметь тот же URL, а не только div, каким он должен быть.Эта ошибка не возникает с 2 другими цветами, поэтому только с последним цветом в сценарии.Есть идеи, что происходит?

{% if product.title contains "Circle" and product.type == "T-shirts" %}

<a href="/products/black-circle-t-shirt">
{% if product.title contains "Black" %}<span class="black highlightcolor"></span> 
{% else %}<span class="black"></span></a>{% endif %}  

<a href="/products/orange-circle-t-shirt">
{% if product.title contains "Orange" %}<span class="orange highlightcolor"></span>
{% else %}<span class="orange"></span></a>{% endif %} 

<a href="/products/green-circle-t-shirt">
{% if product.title contains "Green" %}<span class="green highlightcolor"></span>
{% else %}<span class="green"></span></a>{% endif %} 

{% endif %}

Answer 1

В настоящее время вы открываете теги <a> во всех случаях, но закрываете их только внутри блока else - это означает, что большую часть времени вы попадете с несовпадающими тегами.

Moveвсе три закрытия </a> вне условного:

<a href="/products/black-circle-t-shirt">
  {% if product.title contains "Black" %}
    <span class="black highlightcolor"></span> 
  {% else %}
    <span class="black"></span>
  {% endif %}
</a>