如何根据卡中选中的单选按钮获取所选颜色

Question

我可以获得选中单选的主题值，但color总是返回第一张卡的值。

例如，当我检查主题3并选择粉红色时，返回的结果是绿色。如果我在主题1中更改颜色值，颜色值就会更改。

有人能帮我吗？我试了很多方法，但还是达不到我想要的结果。这是我的JS Fiddle

$('.layout_style').on('click', 'li>a', function() {
$(this).closest('.theme').find('a').removeClass('active');
$(this).addClass('active');
//console.log($(this).attr('data-color'))
});
$(document).on('click', '#SaveTheme', function() {
var Theme = $('input[name="theme"]:checked').val();
var ThemeColor = $('.layout_style').find(".active").data("color")
console.log(Theme)
console.log(ThemeColor)
});

.row>div {
position: relative
}
.card {
margin-bottom: 30px;
border: none;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
letter-spacing: 0.5px;
border-radius: 15px;
-webkit-box-shadow: 0 0 20px rgba(8, 21, 66, 0.05);
box-shadow: 0 0 20px rgba(8, 21, 66, 0.05)
}
.product-box {
border-radius: 10px;
overflow: hidden
}
.product-box .product-details {
padding: 10px 25px
}
.product-box .product-details p {
margin-bottom: 0;
opacity: 0.8
}
.theme li {
display: inline-block;
width: 20px;
margin: 0 2px
}
.theme_menu ul.theme li a:hover,
.theme_menu ul.theme li a.active {
background: #f9f9f9;
}
.theme_menu ul.theme li {
margin: 0 2px;
display: inline-block;
list-style: none;
}
.theme.layout_style li a {
height: 20px;
width: 20px;
position: relative;
}
.theme.layout_style li a.active {
-webkit-transform: scale(0.75);
transform: scale(0.75);
}
.theme_menu ul.theme li a {
display: block;
}
.tx-center {
text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class='row'>
<div class='col-xl-3 col-sm-6'>
<div class='card'>
<div class='product-box'>
<div class='product-img tx-center'>
<img class='img-fluid ' height="120" src='https://iconarchive.com/download/i109565/cjdowner/cryptocurrency-flat/ICON-ICX.ico' alt=''></div>
<div class='product-details'>
<div class='theme_menu'>
<ul class='theme layout_style tx-center'>
<li>
<a data-color='green' style='background-color: #78cc6d' class='active'></a>
</li>
<li>
<a data-color='blue' style='background-color: rgba(8, 86, 193, 1);'></a>
</li>
<li>
<a data-color='orange' style='background-color: rgba(255, 152, 0, 1)'></a>
</li>
<li>
<a data-color='pink' style='background-color: rgba(255, 94, 148, 1)'></a>
</li>
<li>
<a data-color='purple' style='background-color: rgba(196, 70, 218, 1)'></a>
</li>
<li>
<a data-color='red' style='background-color: rgba(232, 103, 107, 1)'></a>
</li>
</ul>
</div>
<div class='form-check radio radio-primary tx-center'>
<input class='form-check-input' id='radio0' type='radio' name='theme' value='theme1'>
<label class='form-check-label' for='radio0'>Theme 1</label>
</div>
</div>
</div>
</div>
</div>
<div class='col-xl-3 col-sm-6'>
<div class='card'>
<div class='product-box'>
<div class='product-img tx-center'>
<img class='img-fluid' height="120" src='https://iconarchive.com/download/i109565/cjdowner/cryptocurrency-flat/ICON-ICX.ico' alt=''></div>
<div class='product-details'>
<div class='theme_menu'>
<ul class='theme layout_style tx-center'>
<li>
<a data-color='green' style='background-color: #78cc6d' class='active'></a>
</li>
<li>
<a data-color='blue' style='background-color: rgba(8, 86, 193, 1);'></a>
</li>
<li>
<a data-color='orange' style='background-color: rgba(255, 152, 0, 1)'></a>
</li>
<li>
<a data-color='pink' style='background-color: rgba(255, 94, 148, 1)'></a>
</li>
<li>
<a data-color='purple' style='background-color: rgba(196, 70, 218, 1)'></a>
</li>
<li>
<a data-color='red' style='background-color: rgba(232, 103, 107, 1)'></a>
</li>
</ul>
</div>
<div class='form-check radio radio-primary tx-center'>
<input class='form-check-input' id='radio1' type='radio' name='theme' value='theme2'>
<label class='form-check-label' for='radio1'>Theme 2</label>
</div>
</div>
</div>
</div>
</div>
<div class='col-xl-3 col-sm-6'>
<div class='card'>
<div class='product-box'>
<div class='product-img tx-center'>
<img class='img-fluid' height="120" src='https://iconarchive.com/download/i109565/cjdowner/cryptocurrency-flat/ICON-ICX.ico' alt=''></div>
<div class='product-details'>
<div class='theme_menu'>
<ul class='theme layout_style tx-center'>
<li>
<a data-color='green' style='background-color: #78cc6d' class='active'></a>
</li>
<li>
<a data-color='blue' style='background-color: rgba(8, 86, 193, 1);'></a>
</li>
<li>
<a data-color='orange' style='background-color: rgba(255, 152, 0, 1)'></a>
</li>
<li>
<a data-color='pink' style='background-color: rgba(255, 94, 148, 1)'></a>
</li>
<li>
<a data-color='purple' style='background-color: rgba(196, 70, 218, 1)'></a>
</li>
<li>
<a data-color='red' style='background-color: rgba(232, 103, 107, 1)'></a>
</li>
</ul>
</div>
<div class='form-check radio radio-primary tx-center'>
<input class='form-check-input' id='radio1' type='radio' name='theme' value='theme3'>
<label class='form-check-label' for='radio1'>Theme 3</label>
</div>
</div>
</div>
</div>
</div>
</div>
<button id="SaveTheme">Save</button>

Answer 1

您可以使用以下代码：

$('.layout_style').on('click', 'li>a', function() {
$(this).closest('.theme').find('a').removeClass('active');
$(this).addClass('active');
//console.log($(this).attr('data-color'))
});
$(document).on('click', '#SaveTheme', function() {
var Theme = $('input[name="theme"]:checked').val();
var ThemeColor = $('input[name="theme"]:checked').closest('.product-details').find(".layout_style .active").data("color")
console.log(Theme)
console.log(ThemeColor)
});