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

Question

我有一个类似下面的代码，我想在点击like/comment/star时得到对应帖子的唯一post_id。

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

还有其他方法可以实现吗？还是我可以用同样的逻辑。我正在使用 ajax 使like/comment/star 工作（不刷新）。那么，如何获取 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>

Answer 2

您可以使用siblings 函数来获取输入值。

例如

$(".like,.comment,.star").on("click", function() {
  var val = $(this).siblings("input.post_id").val();
  console.log("%s clicked on post %s.", this.className, val);
});

.like,
.comment,
.star {
  width: 20px;
  height: 20px;
}

.like {
  background: blue;
}

.comment {
  background: orange;
}

.star {
  background: yellow;
}

<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>

solution by Taki 最好不过。如果您需要在点击时获取所有 3 张图片的 id，您可以将 data-id 设置为父 div。

例如

HTML：

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

JS：

var id = $(this).parent("div").data("id")

Answer 3

JS 代码应该是这样的：

  var val = $(this).parent(".post").find(".post_id").val();

让你的HTML 喜欢：

$(".like").on("click", function() {
  var val = $(this).parent(".post").find(".post_id").val();
  alert(val);
});

<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>
  <input type="hidden" class="post_id" value="post_id-1">
  <img alt="Image-1">
  <img class="like" alt="like">
  <img class="star" alt="star">
  <img class="comment" alt="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" alt="like">
  <img class="star" alt="star">
  <img class="comment" alt="comment">
</div>

我之所以使用class="post_id"是因为输入字段或元素的id不能重复。

据您所知，我在下面添加了一条关于类似 id 用于 HTML 元素的注释。

多个元素可以有相同的ID吗？

是 - 无论它们是否是相同的标签，即使多个元素具有相同的 ID，浏览器也会呈现页面。

它是有效的 HTML 吗？

否。从HTML 5.1 spec 开始，这仍然是正确的。但是，规范还规定getElementById 必须返回具有给定 ID 的第一个元素，从而在无效文档的情况下不会未定义行为。

这种类型的无效 HTML 会有什么后果？

大多数（如果不是全部）浏览器在调用getElementById 时会选择具有给定 ID 的第一个元素。大多数通过 ID 查找元素的库都继承了这种行为。大多数（如果不是全部）浏览器也会将 id-selectors 分配的样式（例如#myid）应用于具有指定 ID 的所有元素。如果这是您所期望和打算的，那么就不会有意想不到的后果。如果您期望/打算做其他事情（例如，返回具有该 ID 的所有元素，或者样式仅应用于一个元素），那么您的期望将不会得到满足，任何依赖于这些期望的功能都会失败。

当多个元素具有相同的 ID 时，某些 javascript 库确实存在无法满足的期望

结论

如果您的代码在当前环境中按预期工作，并且这些 ID 以可预测/可维护的方式使用，那么 只有 2 个实际理由可以考虑不这样做：： p>

• 为了避免您犯错的机会，当多个元素具有相同 ID 时，您使用的库之一实际上会发生故障。
• 为了保持您的网站/应用程序与库或服务（或开发人员！）的向前兼容性，当多个元素具有相同的 ID 时会出现故障，您将来可能会遇到这种情况。

ID 应该是唯一的？是的。

ID 必须是唯一的？ NO，至少 IE 和 FireFox 允许多个元素具有相同的 ID