Javascript 将twig模板中的JS脚本转换为简单JS文件

我有一段代码，我用它来显示运行良好的开/关倍增叠加：

{% for advert in listWorker %}
    <script>
        var clicked = true;
        /* Open when someone clicks on the span element */
        function openNav{{ advert.nom }}() {
            if(clicked){
                document.getElementById("{{ advert.nom }}").style.width = "100%";
                    clicked = false;
            }else{
                document.getElementById("{{ advert.nom }}").style.width = "0%";
                    clicked = true;
            }
        }
        /* Close when someone clicks on the "x" symbol inside the overlay */
        function closeNav{{ advert.nom }}() {
            document.getElementById("{{ advert.nom }}").style.width = "0%";
                clicked = true;
        }
    </script>
{% endfor %}

{%用于listWorker%中的广告]
var=true；
/*当有人单击跨度图元时打开*/
函数openNav{{advert.nom}}（）{
如果（单击）{
document.getElementById（“{{advert.nom}”）.style.width=“100%”；
单击=假；
}否则{
document.getElementById（“{{advert.nom}”）.style.width=“0%”；
单击=真；
}
}
/*当有人单击覆盖层内的“x”符号时关闭*/
函数closeNav{{advert.nom}}（）{
document.getElementById（“{{advert.nom}”）.style.width=“0%”；
单击=真；
}
{%endfor%}

---

但是它在我的小树枝模板中看起来很可怕，是否可以在我的app.js中转换它？

没有必要通过创建所有功能都执行相同操作的函数来过度复杂化。将id相应地传递给函数。这可以通过

twig

实现，但要让javascript保持动态

函数openNav（id）{
var el=document.getElementById（id）；
var clicked=el.getAttribute（'data-clicked'）；
如果（单击==1）{
el.style.width=“100%”；
el.setAttribute（'data-clicked'，0）；
}否则{
el.style.width=“0%”；
el.setAttribute（'data-clicked'，1）；
}
}
功能关闭导航（id）{
var el=document.getElementById（id）；
el.style.width=“0%”；
el.setAttribute（'data-clicked'，1）；
}

div{
边框：1px实心#A2A2；
宽度：100%；
填充：15px；
溢出：隐藏；
}

{%用于listWorker%中的广告}

福
福
福

{%endfor%}
{%用于listWorker%中的广告}
切换
关
{%endfor%}

那不行，是吗？确定如果

listWorker

中有多个条目，那么最终所有条目都只会更改最后一个条目的状态？多个

script

元素和顶级

var

s意味着您最终会得到一个var。它与onclick=“openNav{{{advert.nom}}（）”一起工作。恕我直言，我认为不会。同样，您单击了一个

变量。（但我看到函数名上确实有后缀，所以它们会起作用。）很抱歉，我对twig模板一无所知，但你认为应该重构它是对的。我希望有人能帮忙！这是我的同事说的：（，谢谢。我会在几分钟后尝试。如果你做错了什么。尝试代码片段，按预期工作，但仍然得到引用错误：当我按下我的按钮时openNav没有定义。当我直接将它放在我的小树枝模板中时，它工作正常，但不在js文件中…好的，我通过执行：$（“.btn open”）解决了它。on（'click'，function（）{openNav（$（this）.attr（'btn-id'）；}）；并将onlick替换为btn id=“{{advert.getId（）}”