我有这样的代码，我用它来显示开和关倍数叠加谁工作得很好：
{% 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 %}
但是它在我的trick模板中看起来很糟糕，有可能在我的app.js中转换它吗？
不需要通过创建所有都做相同事情的函数来使事情过于复杂。将id相应地传递给函数。这可以使用twig，但保留javascript动态
function openNav(id) {
var el = document.getElementById(id);
var clicked = el.getAttribute('data-clicked');
if(clicked == 1){
el.style.width = "100%";
el.setAttribute('data-clicked', 0);
}else{
el.style.width = "0%";
el.setAttribute('data-clicked', 1);
}
}
function closeNav(id) {
var el = document.getElementById(id);
el.style.width = "0%";
el.setAttribute('data-clicked', 1);
}div {
border : 1px solid #A2A2A2;
width: 100%;
padding: 15px;
overflow: hidden;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
{% for advert in listWorker %}
<div id="{{ advert.getId() }}">
<ul>
<li>Foo</li>
<li>Foo</li>
<li>Foo</li>
</ul>
</div>
{% endfor %}
{% for advert in listWorker %}
<button type="button" onclick="openNav('{{ advert.getId() }}');">Toggle</button>
<button type="button" onclick="closeNav('{{ advert.getId() }}');">Close</button>
{% endfor %}
</body>
</html>