Question

我有一个类似下面的代码，当我点击/ comment / star时，我希望得到相应帖子的唯一post_id。

我添加了一个隐藏的输入标记来存储每个帖子的post_id的值，并尝试在点击like / comment / star时获取值。但我无法获得价值。

还有其他方法可以达到这个目的吗？或者我可以采用相同的逻辑。我使用ajax使/ like / star工作（没有刷新）。那么，我如何获得post_id以便我可以使用Ajax代码与服务器进行通信。

＆＃13;

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

＆＃13;

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

＆＃13;

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

JS代码应该像：

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

让你的HTML赞成：

＆＃13;

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

＆＃13;

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

＆＃13;

我使用 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以可预测/可维护的方式使用，那么只有两个实际原因需要考虑不要这样做：

为了避免您出错的可能性，当您使用的某个库实际上在多个元素具有相同ID时会出现故障。
为了保持您的网站/应用程序与图书馆或服务（或开发人员！）的向前兼容性，这些图书馆或服务（或开发人员！）在多个元素具有相同ID时出现故障，您将来可能会遇到此问题。

ID应该是唯一的吗？ YES。

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

Answer 3

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

e.g。

＆＃13;

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

＆＃13;

.like,
.comment,
.star {
  width: 20px;
  height: 20px;
}

.like {
  background: blue;
}

.comment {
  background: orange;
}

.star {
  background: yellow;
}

＆＃13;

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

＆＃13;

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

e.g。

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

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

3 个答案: