如何获取以编程方式生成的对象的id？

Question

我正在使用WebApp（Java代码），并且必须使用AJAX来避免在用户操作后进行过多的重新加载。 但我是JavaScript的初学者。 此WebApp是一个社交网络，用户可以在其中创建帖子，回复帖子或喜欢帖子。

对于给定用户的页面，我必须显示写在其上的所有帖子。 我使用循环在用户的页面上写帖子，并且对于每个帖子，两张图片：喜欢/不喜欢。 用户可以通过点击其中一张图片来投票。 单击图片后，JavaScript函数将在后台运行，以增加喜欢/不喜欢的计数器并刷新页面上的数据。

我无法使用document.getElementById()获取喜欢/不喜欢的帖子的特定id因为id或name元素在页面上必须是唯一的

通过点击指定帖子附近的喜欢/不喜欢的图片，我该怎样做才能获得帖子的id？

以下是我用来循环显示帖子列表的代码：

<c:forEach var="post" items="${requestScope['postVotes']}">
 <ul>
 <c:if test="${post.key.responseLevelMessage == 0}">
   <hr>
   <li><font size="2"> Le ${post.key.messageDate} par 
   <a href="${pageContext.request.contextPath}/CentralStation?section=votePage&CurrentContext=${post.key.messageId}">${post.key.messageSender}</a>
   <br>
   <br> ${post.key.messageTitle}<br>
  ${post.key.messageContent}<br>
   </font>
 </c:if>
 <c:if test="${post.key.responseLevelMessage > 0}">
   <li><font size="1"> 
   <a href="${pageContext.request.contextPath}/CentralStation?section=votePage&CurrentContext=${post.key.messageId}">${post.key.messageSender}</a><br>
   <br> ${post.key.messageContent}<br>
   </font>
 </c:if>

 <c:choose>
   //1st case : connected user already voted "like"
  <c:when test="${post.value == 1}">
    <input type="image" src="img/heart-clear.png" value="${post.key.messageId}" onclick="alertForKeyValue();">
    <input type="image" src="img/heart-dislike.png" value="${post.key.messageId}" onclick="alertForKeyValue();">
  </c:when>
   //2nd case : connected user did not vote yet
  <c:when test="${post.value == 0}">
    <input type="image" src="img/heart-like.png" value="${post.key.messageId}" onclick="alertForKeyValue();">
    <input type="image" src="img/heart-dislike.png" value="${post.key.messageId}" onclick="alertForKeyValue();">
  </c:when>
   //3rd case : connected user already voted "dislike"
  <c:when test="${post.value == -1}">
    <input type="image" src="img/heart-like.png" value="${post.key.messageId}" onclick="alertForKeyValue();">
    <input type="image" src="img/heart-clear.png" value="${post.key.messageId}" onclick="alertForKeyValue();">
  </c:when>
 </c:choose>
 </li>
 </ul>
 </div>
 </c:forEach>

$ {post.key.messageId}是包含帖子ID的JSTL表达式。

如您所见，post id值存放在每个书写按钮附近。我试图使用ID / NAME属性，给它们发布ID值，但JS函数总是给我一个＆＃34; undefined＆＃34;值。

这是页面外观不佳的打印屏幕。每个帖子都有一对像/不喜欢的按钮：*

Answer 1

通常人们会使用data属性来跟踪标记中的这类内容。关键是将这些数据属性放在带有服务器端代码的标记中。例如：

<强>标记：

<article class="post" data-post-id="1">
    <button class="like-button" data-post-id="1">Like</button>
</article>

JS（使用jQuery）：

$('.like-button').on('click', function(){
    var postId = $(this).data('post-id');
    // Do some stuff with the postId
});

Answer 2

Thanx to @canisminor通过向调用函数添加“this.value”参数解决了问题：

<input type="image" src="img/heart-remove.png"
    value="${post.key.messageId}"
    onclick="dislike(this.value);">

Like（）和Dislike（）函数（也由CanisMinor建议）接收正确的参数（帖子ID），现在有数据可以使用。

我还想感谢@stafree，他非常有趣地介绍了名为“Data”的jQuery强大功能。 我实际上对jQuery一无所知（就像JS实际上......），但我在jQuery网站上关于Data函数的内容非常有趣。

Thanx对你们所有人。

Answer 3

使用.parentElement()，.getElementId()，.nextSibling()等来选择附近的元素。

有关W3Schools的更多信息。