Конвертировать JS-скрипт из шаблона ветки в простой JS-файл - PullRequest
Новая
       6

Конвертировать JS-скрипт из шаблона ветки в простой JS-файл

0 голосов
/ 30 октября 2018

У меня есть этот код, который я использую, чтобы показать и включить или выключить оверлей, который работает довольно хорошо: 

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

1 Ответ

0 голосов
/ 30 октября 2018

Нет необходимости слишком усложнять вещи, создавая функции, которые все делают одно и то же. Передайте идентификаторы соответственно к функции. Это вы можете сделать с 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...