jQuery点击事件：如何获取当前元素下嵌套DIV的info值？

当前代码的问题在于，点击事件中使用了全局选择器$(".cont-checkbox > label > div.info")，会选中页面中所有匹配该选择器的元素，因此每次点击都会输出所有.info的文本内容。

修正后的代码 #

$(".cont-checkbox").click(function() {
  // 限定在当前点击的容器内查找.info元素
  const currentInfoText = $(this).find("label > div.info").text();
  console.log(currentInfoText);

  // 此处可将currentInfoText用于Ajax请求
});

关键说明 #

• 点击事件回调中的$(this)指向当前被点击的.cont-checkbox容器，而非页面中所有同类容器
• 使用.find()方法在当前容器的后代元素中查找目标，确保只获取当前点击项的.info文本

可选：结合复选框选中状态处理 #

如果需要仅在复选框被选中时获取文本，可以添加状态判断：

$(".cont-checkbox").click(function() {
  const checkbox = $(this).find("input[type='checkbox']");
  // 判断复选框是否被选中
  if (checkbox.is(":checked")) {
    const currentInfoText = $(this).find("label > div.info").text();
    console.log(currentInfoText);
    // 执行Ajax请求逻辑
  }
});

内容的提问来源于stack exchange，提问作者Brad