モーダルでデータを変更

Question

<tbody> 
    <tr th:each="worker: ${workersList}"> 
     <td th:text="${worker.id}"></td> 
     <td th:text="${worker.name}"></td> 
     <td th:text="${worker.email}"></td> 
     <td> 
      <a href="#editModal" class="btn tooltipped modal-trigger" data-position="top" data-delay="50" data-tooltip="Edit"> 
       <i class="material-icons">mode_edit</i> 
      </a> 
     </td> 
    </tr> 

    <!-- Edit Modal Structure --> 
    <div id="editModal" class="modal modal-fixed-footer"> 
     <div class="modal-content"> 
      <h4 th:text="${worker.email}"></h4> 
      <p>A bunch of text</p> 
     </div> 
     <div class="modal-footer"> 
      <a href="#!" class="modal-action modal-close waves-effect waves-grey btn-flat">Update</a> 
      <a href="#" class="modal-action modal-close waves-effect waves-red btn-flat">Close</a> 
     </div> 
    </div> 
</tbody> 

こんにちは、私は上のコードに問題があります。このモーダルの中のすべての労働者のリストから実際にクリックされた労働者を取得する必要があります。しかし、私は常にリストから同じ最初の労働者を得ました。別の従業員を得るためにそれを変更する方法は、私がクリックする人に依存していますか？ 助けてくれてありがとう！ JavaScriptで、その後

<div id="editModal" class="modal modal-fixed-footer"> 
    <div class="modal-content"> 
     <h4 id="modal-email"></h4> 
     <p>A bunch of text</p> 
    </div> 
    <div class="modal-footer"> 
     <a href="#!" class="modal-action modal-close waves-effect waves-grey btn-flat">Update</a> 
     <a href="#" class="modal-action modal-close waves-effect waves-red btn-flat">Close</a> 
    </div> 
</div> 

：：店、あなたのモーダル定義で

<a href="#editModal" class="btn tooltipped modal-trigger" data-position="top" data-delay="50" data-tooltip="Edit" th:attr="data-email=${worker.email}"><i class="material-icons">mode_edit</i></a> 

modal-email番号：

Answer 1

あなたはデータ属性を使用して、たとえば、モーダルにデータを渡す必要があります

$('#editModal').modal({ 
    ready: function(modal, trigger) { 
     var button = $(trigger); 
     var email = button.data('email'); 
     $('#modal-email').html(email);  
    } 
});