代码在代码片段工具正常但浏览器失效，如何获取表头名称生成指定提示

看起来你遇到了两个核心问题：一是浏览器中$12按钮点击没反应，二是需要实现包含重量和产品名称的提示弹窗。我来帮你一步步解决：

1. 先解决浏览器中事件绑定失败的问题 #

代码片段工具通常会自动处理DOM加载时机，但在浏览器中，如果你的JS代码在页面元素渲染前就执行了，会导致找不到.btn1元素，事件绑定自然失效。解决方法很简单，把你的代码包裹在DOM就绪事件里：

$(document).ready(function() {
  // 把你的点击事件代码放在这里
  $(".btn1").click(function () {
    // 后续逻辑写在这里
  });
});

这样能确保只有当页面所有DOM元素都加载完成后，才会绑定点击事件，避免找不到元素的问题。

2. 实现正确的提示内容 #

根据你的需求，要显示"You have selected 1 gram of Skywalker"这类提示，我们需要从对应的行里获取重量和产品名称。假设你的HTML结构类似这样（如果结构不同，你可以调整选择器）：

<table>
  <tr>
    <td>Skywalker</td> <!-- 产品名称，表头对应的内容 -->
    <td class="weight1">1</td> <!-- 重量 -->
    <td><button class="btn1">$12</button></td>
  </tr>
  <tr>
    <td>Other Strain</td>
    <td class="weight1">3.5</td>
    <td><button class="btn1">$35</button></td>
  </tr>
</table>

那修改后的点击事件代码应该是：

$(document).ready(function() {
  $(".btn1").click(function () {
    // 获取当前按钮所在的行
    const currentRow = $(this).closest("tr");
    // 获取重量值
    const weight = currentRow.find(".weight1").text().trim();
    // 获取产品名称（这里假设是该行第一个单元格的内容）
    const productName = currentRow.find("td:first").text().trim();
    
    // 弹出提示
    alert(`You have selected ${weight} gram of ${productName}`);
  });
});

额外排查点 #

如果还是没反应，你可以检查这些地方：

• 确认jQuery已经正确引入到页面中（浏览器控制台输入$，如果返回函数说明已引入，否则要添加jQuery的CDN或本地文件）
• 检查按钮的class是否确实是btn1，有没有拼写错误
• 打开浏览器控制台（F12），看有没有报错信息，比如选择器找不到元素、变量未定义等

这样调整后，应该就能在浏览器中正常触发alert，并且显示你想要的内容了。

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