Невозможно получить кнопку для работы в шаблоне EJS - PullRequest
Новая
       8

Невозможно получить кнопку для работы в шаблоне EJS

0 голосов
/ 02 сентября 2018

У меня есть цикл, который заполняет страницу несколькими элементами. Каждый предмет имеет:

  • изображение
  • текст
  • кнопка
  • уникальный идентификатор, связанный с ним

В качестве теста я написал функцию для возврата идентификатора и имени плана при нажатии кнопки. Однако только идентификатор и имя плана первого элемента возвращаются для всех элементов в списке. Когда я смотрю на HTML, правильные уникальные идентификаторы заполняются в скрытых полях, поэтому мне трудно понять, почему правильные идентификаторы возвращаются при нажатии.

Пожалуйста, смотрите код ниже:

EJS: 

<% for (var i = 0; i < plans.length; i++) {%>
  <div class="col-md-4" data-shuffle="item" data-groups="audio,video">
     <form>
        <a class="hover-move-up" href="#">
           <img src="/img/portfolio/1.jpg" alt="screenshot">
           <div class="text-center pt-5">
               <h5 class="fw-5001 mb-0"><%= plans[i].plan_name %></h5>
               <small class="small-5 text-lightest text-uppercase ls-2"><%= plans[i].regular_plan_cost %> | <%= plans[i].huddl_plan_cost %></small> 
                  <br>
                  <input id="planID" name="ID" type="hidden" value="<%= plans[i]._id %>">
                  <input id="planName" name="planName" type="hidden" value="<%= plans[i].plan_name %>">
                  <button type="submit" class="btn btn-primary">Join</button>
              </form>
                </div>
              </a>
            </div>

          <% } %>

JS: 

var ID = document.getElementById("planID").value;
var planName = document.getElementById("planName").value;

$('button').on('click', function() {
  alert(ID + ' ' + planName);
})

Буду признателен за любую помощь в выяснении этого.

Ответы [ 2 ]

0 голосов
/ 02 сентября 2018

используйте этот фрагмент. 

    <div class="text-center pt-5">
           <h5 class="fw-5001 mb-0"><%= plans[i].plan_name %></h5>
           <small class="small-5 text-lightest text-uppercase ls-2"><%= plans[i].regular_plan_cost %> | <%= plans[i].huddl_plan_cost %></small> 
              <br>
              <input id="planID_<%= i %>" name="ID" type="hidden" value="<%= plans[i]._id %>">
              <input id="planName_<%= i %>" name="planName" type="hidden" value="<%= plans[i].plan_name %>">
              <button data-ref="<%= i %>" class="btn btn-primary">Join</button>
          </form>
            </div>
          </a>
        </div>

Я только что добавил инкрементор в IDS: 

<input id="planID_<%= i %>"
<input id="planName_<%= i %>"
<button data-ref="<%= i %>"

Итак, теперь у вас есть свои уникальные идентификаторы. Вам также нужен javascript для «оповещения»?

Вот дополнительный код. Я не проверял это, и мой jQuery ржавый, но, надеюсь, это даст вам то, что вам нужно

Javascript: 

$('button').each(function() {
  $(this).on('click', function() {
     myFN($(this).attr("data-ref"));
  })
});

function myFN(val) {
  var ID = document.getElementById("planID_" + val).value;
  var planName = document.getElementById("planName_" + val).value;
  console.log("VALUES: ", ID, planName);
}
0 голосов
/ 02 сентября 2018

Взгляните на тег формы, который у вас есть, он некорректно закрывается. Вам нужно переместить его под тег div и тег a. Возможно, это исправит это.

...