Связывание кнопки с элементом списка в ejs - PullRequest
Новая
       11

Связывание кнопки с элементом списка в ejs

0 голосов
/ 25 мая 2018

У меня есть массив answer объектов, и я использую цикл for в ejs для отображения их пользователю.Объект ответа имеет атрибут id, text и логический correct. 

<% answers.forEach((answer)=>{ %>
  <li>
    <p><%=answer.text%></p>
    <button>CORRECT</button>
  </li>
<%})%>

Я хочу, чтобы пользователь мог щелкнуть правильный ответ, и мой сценарий должен отправить id ответа, который был нажат на сервере, чтобы я мог обновить атрибут correct для этого конкретного ответа в моей базе данных Mongo.Возможно что-то вроде: 

$(the_button_clicked).click((event)=>{
  $.ajax({
    sending the correct answer to the database
  });
});

Проблема в том, что это список, и я не знаю, как связать каждый конкретный ответ с его правильной кнопкой.Возможно, я могу добавить класс или идентификатор к элементу кнопки и установить его на answer.id, но мне интересно, есть ли лучший способ сделать это.Я чувствую, что это должно быть обычным делом.

1 Ответ

0 голосов
/ 25 мая 2018

Вы можете использовать data-attribute для хранения пользовательских данных в вашем HTML.Вероятно, хорошая идея также дать вашей кнопке класс. 

<% answers.forEach((answer)=>{ %>
  <li>
    <p><%=answer.text%></p>
    <button class="correct" data-id="<%=answer.id%>">CORRECT</button>
  </li>
<%})%>

В вашем jQuery создайте обработчик onclick для своей кнопки и получите связанный идентификатор с помощью this.dataset.id или $ (this) .data ('id') ; 

$('button.correct').click(function () {
    var id = this.dataset.id;
    // do something with id 
});

Demo 

$(function() {
  $('button.correct').click(function() {
    console.clear();
    console.log("this.dataset.id", this.dataset.id);
    console.log("$(this).data('id')", $(this).data('id'));
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <p>A</p>
    <button class="correct" data-id="1">CORRECT</button></li>
  <li>
    <p>B</p>
    <button class="correct" data-id="2">CORRECT</button></li>
  <li>
    <p>C</p>
    <button class="correct" data-id="3">CORRECT</button></li>
</ul>
...