如何用jQuery/JavaScript获取active类元素ID？checkDet函数返回undefined

首先，你的checkDet函数返回undefined主要是两个核心问题导致的：

1. 选择器写法错误 + 查找逻辑方向不对 #

你写的$(this).closest("colo-list-image active")存在两处问题：

• closest()方法是用来查找当前元素的父/祖先元素，但带active类的颜色选项li并不是"Add to cart"按钮的祖先节点，所以这个方法根本找不到目标元素。
• 类选择器必须以.开头，正确的类选择器写法是.colo-list-image.active，而不是直接写类名字符串。

2. 修复后的checkDet函数 #

直接选择页面上带有active类的.colo-list-image元素即可，修改后的代码如下：

function checkDet(){
  // 直接定位带有active类的颜色选项元素
  var activeColorItem = $('.colo-list-image.active');
  if(activeColorItem.length > 0){
    var abc = activeColorItem.attr("id");
    console.log(abc);
    // 这里可以继续编写添加购物车的后续逻辑
  } else {
    console.log("请先选择商品颜色");
    // 可以在这里添加用户提示，比如alert弹窗或页面提示文案
  }
}

额外优化建议（可选） #

你当前通过PHP动态生成selectColorXXX函数的写法比较冗余，推荐用事件委托统一处理颜色点击事件，代码更简洁易维护：

// 删掉所有PHP动态生成的selectColorXXX函数，替换成这段代码
$(document).on('click', '.colo-list-image', function(){
  // 从元素id中提取product_color_id
  var pro_col = $(this).attr('id').replace('col', '');
  var ins = 'prosi';
  
  $('.active').removeClass('active');
  $(this).addClass('active'); // 用jQuery的addClass更安全，避免重复添加类名
  
  $.ajax({
    type: 'post',
    url: 'frextra.php',
    data: {pro_col: pro_col, ins: ins}, // 推荐用对象形式传参，可读性更强
    success: function(data) {
      $("#sizecover").show();
      $('#siz').html(data).show();
    }
  });
});

这样不管有多少个颜色选项，都只需要一段代码处理，后续维护成本更低。

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