python项目_闪送超市选择商品时的样式

代码实现:

当用户点击肉禽蛋品--------家禽类
肉禽蛋品和家禽类的样式会发生改变，其他子类，父类样式不变
子类下的商品列表会从肉禽蛋品的全部商品切换成家禽类的商品

图片展示

<div id="all_types_container">
    <div>
        {% for foodtype_childname in foodtype_childname_list %}
            {% if foodtype_childname.1 == childcid %}
                <a href="{% url 'axf:market_with_params' typeid=typeid childcid=foodtype_childname.1 order_rule=0 %}">
                  {#        当用户点击的商品分类和遍历的一致后 触发单元格变成选中状态<黄色>     #}
                    <button class="btn btn-success">{{ foodtype_childname.0 }}</button>
                </a>
            {% else %}
                <a href="{% url 'axf:market_with_params' typeid=typeid childcid=foodtype_childname.1 order_rule=0 %}">
                    <button class="btn btn-default">{{ foodtype_childname.0 }}</button>
                </a>
            {% endif %}
        {% endfor %}
    </div>
</div>

代码2

        {#        左边的大类型导航     #}
        <aside>
            <ul>
                {% for foodtype in foodtypes %}
                    <li>
                        <a href="{% url 'axf:market_with_params' typeid=foodtype.typeid childcid=0 order_rule=0 %}">
                            {{ foodtype.typename }}</a>
                        {% if foodtype.typeid == typeid %}
                            <span class="yellowSlide"></span>
                        {% endif %}

                    </li>
                {% endfor %}

            </ul>

代码分析

1.关键数据: 		foodtype_childname_list=[['全部分类','0'],['进口水果','103534'],]   (第一个大元素就是全部分类)
     button中的class 用来设计相应的选中样式
     
2.遍历foodtype_childname_list,查看当前遍历到的foodtype_childname.1是否与传进来的childcid相同

3.刚开始的foodtype_childname.1 肯定和childcid相同(childcid默认为0,代码请看"代码2"),,接下来就是if不相同 if 不相同,超链接到反向解析地址axf:market_with_params,携带参数typeid,   childcid,   order_rule,并且设置选中按钮foodtype_childname.0的样式