Laravel项目中无法获取foreach循环内选中卡片ID的问题求助

问题原因 #

你把ID属性加在了卡片内部的<a>标签上，但点击事件绑定在了外层的.getmonthsale（<div class="card">）元素上。触发点击事件时，$(this)指向的是这个没有ID的div，所以调用attr("id")会返回undefined。

解决方法 #

下面两种方法任选其一即可：

方法1：将ID移到外层卡片元素上

修改Blade循环里的卡片div，把id="{{ $item }}"从<a>标签移到.getmonthsale所在的div上：

<div class="row">
  @foreach ($getmonths as $item )
    <div class="col-4 col-lg-2 mb-4">
      <!-- 将id属性移到这里 -->
      <div class="card maincard h-100 align-items-center getmonthsale" id="{{ $item }}">
        <a href="#" value ="{{ $getmonths[0] }}" name="{{ $item }}">
          <div class="row row-bordered g-0">
            <div class="card-header d-flex align-items-center justify-content-between pb-0 pt-3 mb-0">
              <div class="card-title text-center d-flex align-items-center mb-0">
                <h6>{{$item}}</h6>
              </div>
            </div>
          </div>
        </a>
      </div>
    </div>
  @endforeach
</div>

你的原有JS代码不需要修改，现在$(this).attr("id")就能正确拿到月份+年份的ID了。

方法2：修改JS代码，获取子元素的ID

$(".getmonthsale").on("click", function(e) {
  e.preventDefault();
  // 找到卡片内的a标签，获取它的id
  var requested_to = $(this).find("a").attr("id");
  alert(requested_to);
  
  // 后续AJAX请求逻辑示例
  /*
  $.ajax({
    url: "/your-api-endpoint",
    method: "GET",
    data: { month_year: requested_to },
    success: function(response) {
      // 更新表格数据的逻辑
    }
  });
  */
})

额外优化建议 #

<a>标签的value属性不符合HTML规范，建议使用data-*自定义属性来存储额外数据，比如：

<a href="#" data-month-year="{{ $item }}" name="{{ $item }}">

之后在JS中可以通过data()方法更优雅地获取：

var requested_to = $(this).find("a").data("month-year");

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