Wie Wert erhalten, wenn sie auf href

Question

klicken I von Spring erhalten diesen Code Ui:

<div th:each="answer: ${allSearch}"> 
    <div class="pic"> 
     <a href="#" onclick="toSelectedObject()" style="text-decoration: none"> 
      <input type="hidden" name="photoId" id="photoId" th:value="${answer.photo}" /> 
      <input type="hidden" name="id" id="id" th:value="${answer.id}" /> 
      <img th:attr="src=${answer.photo}" width="220" height="280" /> 
      <div align="center"> 
       <b> <span th:text="${answer.name}">Name</span></b> 
      </div> 
     </a> 
    </div> 
</div> 

ich viele Fotos recive (href) aus verschiedenen Datenbanken. Ich möchte Fotowert erhalten, weil ich "split" verwenden werde, um zu verstehen, von welcher DB dieses Foto war. Danach mache ich window.location.href in die richtige Richtung. Als ich ein DB verwendet meine href war wie dieser

<a th:href="@{~/selectedPage(hiddenModelId=${selected.id})}" style="text-decoration: none"> 

Jetzt kann ich nicht so, becouse ich eine andere selectedPage haben. Ich versuche, wie dies zu tun:

var photo; 
var id; 

function toSelectedObject(){ 
    photo = $("#photoId").val(); 
    id = $("#id").val(); 
    alert("ID: "+id + " photo: "+photo); 
} 

Aber ich immer id und Foto nur das erste Bild zu sehen. Ich verstehe nicht warum? Ich versuche, mit Klasse:

<input type="hidden" class="photoId" th:value="${curtain.photo}"/> 
<input type="hidden" class="id" th:value="${curtain.id}"/> 

Aber es ist das gleiche. Ich denke, Problem, weil ich identische Klassen oder ID habe. Becouse jeder div identische Klassen oder die ID haben, aber mit unterschiedlichen Informationen

Answer 1

Try this:

<div th:each="answer: ${allSearch}"> 
    <div class="pic"> 
     <a href="#" style="text-decoration: none"> 
      <input type="hidden" name="photoId" id="photoId" th:value="${answer.photo}" /> 
      <input type="hidden" name="id" id="id" th:value="${answer.id}" /> 
      <img th:attr="src=${answer.photo}" width="220" height="280" /> 
      <div align="center"> 
       <b> <span th:text="${answer.name}">Name</span></b> 
      </div> 
     </a> 
    </div> 
</div> 

<script> 
$('.pic a').on('click', function (e) { 
    var photo = $(this).find('input[name=photoId]').val(); 
    var id = $(this).find('input[name=id]').val(); 
    alert("ID: "+id + " photo: "+photo); 
}) 
</script>