javascript - 使用 Jquery 获取最近输入字段的 POST_ID

Question

我有一个类似下面的代码，我想在点击赞/评论/星时获取相应帖子的唯一post_id。

我添加了一个隐藏的输入标签来存储每个帖子的 post_id 的值，并在点击喜欢/评论/明星时尝试获取该值。但是我无法获取值。

还有其他方法可以实现吗？或者我可以采用相同的逻辑吗？我正在使用 ajax 使喜欢/评论/明星工作(不刷新)。那么，如何获取 post_id 以便我可以使用 Ajax 代码与服务器通信。

$(".like").on("click", function() {
  var val = $(this).closest("div.post").find("input[id='post_id']").val();
  alert(val);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="post" id="post-1">
  <h1>
    Post Title1
  </h1>
  <input type="hidden" class="post_id" value="post_id-1">
  <img alt="Image-1">
  <img class="like">
  <img class="star">
  <img class="comment">
</div>

<div class="post" id="post-2">
  <h1>
    Post Title2
  </h1>
  <input type="hidden" class="post_id" value="post_id-2">
  <img alt="Image-1">
  <img class="like">
  <img class="star">
  <img class="comment">
</div>

....

<div class="post" id="post-n">
  <h1>
    Post Titlen
  </h1>
  <input type="hidden" class="post_id" value="post_id-n">
  <img alt="Image-n">
  <img class="like">
  <img class="star">
  <img class="comment">
</div>

Answer 1

您可以使用 data图像上的属性以避免隐藏输入和重复唯一 ID:

$(".like").on("click", function() {
  var val = $(this).data('id');
  alert(val);
});

.like {
  curosor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post" id="post-1">
  <h1>
    Post Title1
  </h1>
  <img alt="Image-1">
  <img class="like" alt="like" data-id="post_id-1">
  <img class="star">
  <img class="comment">
</div>

<div class="post" id="post-2">
  <h1>
    Post Title2
  </h1>
  <img alt="Image-1">
  <img class="like" alt="like" data-id="post_id-2">
  <img class="star">
  <img class="comment">
</div>

....

<div class="post" id="post-n">
  <h1>
    Post Titlen
  </h1>
  <img alt="Image-n">
  <img class="like" alt="like" data-id="post_id-n">
  <img class="star">
  <img class="comment">
</div>