Question

我有这段代码可以用来显示和覆盖倍数叠加效果很好的人：

{% 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 %}

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

Answer 1

创建具有相同功能的函数无需过于复杂。相应地将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>

将树枝模板中的JS脚本转换为简单的js文件

1 个答案: