如何根据选中的Radio获取对应Card中的选中颜色？

你当前获取颜色的代码$('.layout_style').find(".active").data("color")会匹配页面中所有.layout_style下的.active元素，而jQuery调用.data()时只会返回第一个匹配元素的值，所以不管选中哪个主题，始终拿到第一个卡片的颜色。

需要先定位到选中radio所在的卡片容器，再在这个容器内查找激活的颜色选项：

修改#SaveTheme的点击事件代码：

$(document).on('click', '#SaveTheme', function() {
  // 获取选中的radio元素
  const selectedRadio = $('input[name="theme"]:checked');
  if (!selectedRadio.length) return; // 处理未选中主题的情况
  
  const Theme = selectedRadio.val();
  // 从选中的radio向上遍历找到所在的card容器，再在容器内找激活的颜色
  const ThemeColor = selectedRadio.closest('.card').find('.layout_style .active').data("color");
  
  console.log(Theme);
  console.log(ThemeColor);
});

你的HTML里有两个radio的id都是radio1（Theme2和Theme3对应的radio），这会导致点击label时触发异常，建议分别改成radio1和radio2，对应的label的for属性也要同步修改。

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