Laravel项目中Ajax获取循环生成的Card Header月份值时返回undefined问题求助

问题分析 #

你遇到的undefined弹窗问题，核心原因有两个：

1. 重复ID违反HTML规范：在@foreach循环里，你给所有卡片的月份span和按钮都设置了相同的id（monthnameforcard、getmonthmilkdetails），但HTML要求ID必须唯一。document.getElementById()只会返回第一个匹配的元素，导致点击任意按钮时，都只能尝试获取第一个卡片的内容，逻辑完全混乱。
2. 错误获取span内容的方式：<span>标签没有value属性，用.value去读取它的文本内容必然返回undefined，正确的做法是用textContent或innerText，但这也解决不了重复ID的根本问题。

解决方案 #

我们可以通过给按钮添加自定义data-*属性的方式，直接把对应月份绑定到按钮上，点击时直接读取这个属性值，同时彻底避免重复ID的问题。

步骤1：修改Blade模板代码

移除重复的ID，给按钮添加data-month属性存储当前卡片的月份：

@foreach ($totalmilkselldataforyeartotable as $item)
 <div class="col-md-4 col-sm-6 col-lg-2">
 <div class="card border-success " style="width: 12rem;">
 <div class="card-header">
 <span class="monthnameforcard"> <!-- 将id改为class -->
 <strong>{{ $item['monthname'] }}</strong>
 </span>
 </div>
 <ul class="list-group list-group-flush">
 <li class="list-group-item">Total Milk - &nbsp;<strong>{{ $item['totalmilk'] }}</strong></li>
 </ul>
 <!-- 添加data-month属性，绑定当前月份 -->
 <button type="button" class="btn btn-link get-month-milk-details" data-month="{{ $item['monthname'] }}">
 <span class='glyphicon glyphicon'> More <i class="fas fa-arrow-circle-right"></i>
 </span>
 </button>
 </div>
 </div>
@endforeach

步骤2：修改Ajax代码

通过点击的按钮直接读取data-month属性值，无需再查找其他元素：

// 用class选择器绑定点击事件（避免重复ID问题）
$(document).on('click', '.get-month-milk-details', function() {
 // 从当前按钮的data-month属性获取月份
 var getmonthnameforajax = $(this).data('month');
 alert(getmonthnameforajax); // 现在能正确显示对应卡片的月份了
 $.ajax({
 type: 'post',
 url: '/getmonthmilkdetails',
 data: {
 '_token' : $('input[name=_token]').val(),
 'monthname' : getmonthnameforajax,
 },
 success: function(data) {
 // 这里可以处理控制器返回的数据，比如渲染到页面
 console.log('返回的数据：', data);
 }
 });
});

补充方案（可选） #

如果不想用data-*属性，也可以通过DOM层级关系查找对应月份：

$(document).on('click', '.get-month-milk-details', function() {
 // 找到当前按钮所在的卡片，再定位到月份span
 var getmonthnameforajax = $(this).closest('.card').find('.monthnameforcard').text().trim();
 alert(getmonthnameforajax);
 // 后续Ajax代码不变
});

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