Django将事件监听器添加到模板标签上的for ...循环

Question

我正在尝试将事件侦听器添加到由 django 模板标签创建的链接列表中。

它应该获取类 div.cat-link的对象列表，并为每个对象添加一个事件监听器以显示 div.cat-select的匹配ID

html

<div class="cat">
    <div class="cat-links">
        {% for t in tags %}
        <div id="{{t|lower}}" class="cat-link">
            <a class="cat" href="{% url 'list_product1' t %}">{{t}}</a>
        </div>

        {% endfor %}
    </div>
</div>

<div class="cat-list">
    {% for t in tags %}
    <div class="cat-select" id="cat_{{t|lower}}">
        {% for p in t.produto_set.all %}
        <div class="cat-product">
            <!--IMAGES-->
            <div class='img'>
                <amp-carousel lightbox controls autoplay delay="3000" width="250"
                    height="250" layout="responsive" type="slides">
                    {% for pic in p.images.all %}
                    <amp-img src="{{ pic.image.url }}" width="250" height="150"
                        layout="responsive" alt="{{ p.nome }}">
                    </amp-img>
                    {% endfor %}
                </amp-carousel>
            </div>
            <!-- INFOS -->
            <div class='infos-prod'>
                <a class='cat-product' href="{% url 'detail_product' p.id %}">
                    <h3>{{p.nome}} </h3>
                </a>
                <a class='cat-product' href="{% url 'detail_product' p.id %}">
                    R$: {{ p.preco }}
                </a>
            </div>
        </div>
        {% endfor %}
    </div>
    {% endfor %}
</div>

JavaScript：

<script id="cat-script" type="text/javascript" target="amp-script">

    function Showing(one) {
        var v1 = document.getElementById(one);
        v1.style.display = "flex";

    };
    function Hiding(one) {
        var v1 = document.getElementById(one);
        v1.style.display = "none";

    };


    function Category() {
        var v1 = document.getElementsByClassName('cat-link');
        for (o in v1) {
            var v2 = 'cat_' + v1[o].getAttribute('id')
            v1[o].addEventListener('mouseover', function () { Showing(v2) });
            v1[o].addEventListener('mouseout', function () { Hiding(v2) });
        };
    };

    Category()

</script>

它应该获取类 div.cat-link的对象列表，并为每个对象添加一个事件监听器以显示 div.cat-select的匹配id

我收到了错误：

未捕获的类型错误：v1[o].getAttribute 不是函数

什么都没有发生。

Answer 1

看起来您正在将 Python 语法与 JavaScript 混为一谈。

首先，尝试for (let o of v1) 而不是for (o in v1)。

然后，您尝试通过索引访问它，但这不是您使用的那种循环。试试o.getAttribute('id')。