嵌套While循环中JS函数无法获取正确PHP循环变量值求助

问题原因 #

核心问题是函数定义重复覆盖：
内层循环遍历颜色表时，仅用color_palette_id作为函数名，但外层每个主题下都会生成同名函数，后续循环的函数定义会直接覆盖之前的，导致所有同名按钮最终调用最后一次生成的函数，弹出最后一条的color_name和subject_id。

方案一：生成唯一命名的函数 #

给函数名同时拼接subject_id和color_palette_id，确保每个按钮对应的函数唯一，避免覆盖：

<input type="button" id="choose_subject_color_button_<?=$color_palettes_data['color_palette_id']?>_<?=$index_subjects_data['subject_id']?>" 
       style="background-color: <?=$color_palettes_data['color_hex_code']?>; border: none; width: 60px; height: 20px; margin: 0px; padding: 0px;" 
       value="<?=$color_palettes_data['color_hex_code']?>" 
       onclick="choose_subject_color_function_<?=$color_palettes_data['color_palette_id']?>_<?=$index_subjects_data['subject_id']?>()" >

<script type="text/javascript">
function choose_subject_color_function_<?=$color_palettes_data['color_palette_id']?>_<?=$index_subjects_data['subject_id']?>()
{
  alert ("<?=$color_palettes_data['color_name']?>");
  alert ("<?=$index_subjects_data['subject_id']?>");
}
</script>

方案二：通用函数+Data属性（推荐） #

避免重复生成大量函数，将color_name和subject_id存储在按钮的data-*属性中，用一个通用函数统一处理点击事件：

1. 修改按钮HTML，添加Data属性 #

<input type="button" id="choose_subject_color_button_<?=$color_palettes_data['color_palette_id']?>_<?=$index_subjects_data['subject_id']?>" 
       style="background-color: <?=$color_palettes_data['color_hex_code']?>; border: none; width: 60px; height: 20px; margin: 0px; padding: 0px;" 
       value="<?=$color_palettes_data['color_hex_code']?>" 
       data-color-name="<?=$color_palettes_data['color_name']?>"
       data-subject-id="<?=$index_subjects_data['subject_id']?>"
       onclick="handleColorClick(this)" >

2. 页面底部添加通用函数（仅需定义一次） #

<script type="text/javascript">
function handleColorClick(btn) {
  const colorName = btn.getAttribute('data-color-name');
  const subjectId = btn.getAttribute('data-subject-id');
  alert(colorName);
  alert(subjectId);
}
</script>

这种方案优势明显：仅需一次函数定义，避免冗余代码；数据与DOM元素绑定，逻辑清晰易维护，彻底解决函数名冲突问题。

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