点击父元素时获取子元素数据的实现方案咨询

没问题，我来帮你搞定这个需求！我们分两步走：先从JS对象/JSON动态生成你的div（再也不用硬编码啦），然后实现点击时精准获取对应的标题、地址和距离。

第一步：准备数据源 & 动态生成DOM #

首先我们定义一个模拟的JS数组（你也可以换成从后端接口获取的JSON），里面包含所有需要展示的位置信息，然后用jQuery把这些数据渲染成div：

HTML结构（只需要一个容器） #

<!-- 用来存放所有位置div的容器 -->
<div id="location-container"></div>

JS代码：动态渲染DOM #

// 模拟的数据源，实际项目中可以换成从后端接口获取的JSON
const locations = [
  {
    title: "XX餐厅",
    address: "北京市朝阳区XX路123号",
    distance: "2.3公里"
  },
  {
    title: "XX咖啡店",
    address: "上海市黄浦区XX弄45号",
    distance: "0.8公里"
  },
  {
    title: "XX超市",
    address: "广州市天河区XX大道789号",
    distance: "1.5公里"
  },
  {
    title: "XX书店",
    address: "深圳市南山区XX街101号",
    distance: "3.1公里"
  }
];

$(document).ready(function() {
  const container = $("#location-container");

  // 遍历数据源，逐个生成div并添加到容器中
  locations.forEach((location, index) => {
    // 生成单个位置的div，给每个div加一个data-id属性用来匹配数据源（可选但推荐）
    const locationDiv = $(`
      <div class="location-item" data-id="${index}">
        <h3 class="item-title">${location.title}</h3>
        <p class="item-address">${location.address}</p>
        <p class="item-distance">${location.distance}</p>
      </div>
    `);
    container.append(locationDiv);
  });
});

第二步：绑定点击事件获取数据 #

现在我们给每个生成的div绑定点击事件，有两种可靠的方式获取数据：

方式1：从DOM元素中直接读取文本 #

适合不需要复用原始数据源的场景，直接通过类名定位到对应的文本元素：

// 在$(document).ready()内部添加点击事件绑定
$(".location-item").on("click", function() {
  // 用find()定位到子元素，trim()去掉多余的空格
  const title = $(this).find(".item-title").text().trim();
  const address = $(this).find(".item-address").text().trim();
  const distance = $(this).find(".item-distance").text().trim();

  // 这里可以替换成你需要的操作，比如弹窗展示、提交数据等
  console.log("你点击的位置信息：");
  console.log("标题：", title);
  console.log("地址：", address);
  console.log("距离：", distance);
});

方式2：通过data-id匹配原始数据源 #

如果需要保证数据的准确性（比如DOM文本可能被修改），推荐用这种方式，直接从原始JS对象中取数据：

// 在$(document).ready()内部添加点击事件绑定
$(".location-item").on("click", function() {
  // 获取div上的data-id属性，对应数据源的索引
  const itemId = $(this).data("id");
  // 从数据源中取出对应的数据
  const selectedLocation = locations[itemId];

  // 使用数据
  console.log("你点击的位置信息：");
  console.log("标题：", selectedLocation.title);
  console.log("地址：", selectedLocation.address);
  console.log("距离：", selectedLocation.distance);
});

额外优化建议 #

• 如果你的数据是从后端接口获取的，可以用$.getJSON()来请求数据，比如：

  $.getJSON("/api/locations", function(data) {
    // 这里的data就是后端返回的JSON，直接用它来渲染DOM即可
    locations = data;
    // 然后执行上面的渲染逻辑
  });
  

• 给.location-item加一些CSS样式，让点击区域更明显，提升用户体验。

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