jquery获取在trick中单击的多个按钮的值

Question

我在环和环或宝石的循环中各放一个按钮，这样我就可以得到所选环和宝石的值。然而，我只能在戒指和珠宝中选择一个。当我单击"戒指"然后单击"宝石"时，我选择的戒指按钮不再聚焦。我怎样才能把它们分开，这样我只能在戒指和珠宝中选择一个？

这是样式

<style>
.button{
border: none;
background-color: #fff;
}
.button:focus{
border: 3;
background-color: #000;
}
.button2{
border: none;
background-color: #fff;
}
.button2:focus{
border: 3;
background-color: #000;
}
</style>

这是javascript

$(".button").click(function(){
var value = $(this).val();
//alert(value);
})
$(".button2").click(function(){
var value = $(this).val();
//alert(value);
})

这是树枝

<div>
{% set idx = 0 %}
{% for ring in rings %}
<div class="row g-0 mb-5">
<div class="text-center ">

{% set path = 'customRing/ring/' ~ring.ring_shape~ '/' %}
<button class="button" value = "{{ring.id}}">
<img src="{{ asset(ring_images[idx], 'save_image') }}" width="150", height="150">
</button>
{% set idx = idx + 1 %}
<p>Ring Name: {{ ring.ring_name }}</p>
<p>Ring Type: {{ ring.ring_type }}</p>
<p>Ring Shape: {{ ring.ring_shape }}</p>
<p>Ring Size: {{ ring.size }}</p>
<p>Price: {{ ring.price }}</p>
</div>
<br>
</div>
{% endfor %}
</div>
<div>
<br><br>
{% for jewel in jewels %}
<div class="row g-0 mb-5">
<div class="text-center ">
<p>Ring Name: {{ jewel.jewel_name }}</p>
<p>Ring Type: {{ jewel.jewel_rotation }}</p>
<p>Price: {{ jewel.price }}</p>
<button class="button2" value = "{{jewel.id}}">
{% set path = 'customRing/jewel/' ~jewel.image_name~%}
<img src="{{ asset(path, 'save_image') }}" width="150", height="150">
</button>
</div>
<br>       
</div>
{% endfor %}   
</div>

Answer 1

我将css和jquery更改为这个，它正在中工作

$(document).ready(function () {
var ring_button = $(".button").on("click", function () {
$(".button").removeClass("active");
$(this).addClass("active");
});
var jewel_button = $(".button2").on("click", function () {
$(".button2").removeClass("active");
$(this).addClass("active");
});
});

.button{
border: none;
background-color: #fff;
}
.button:focus{
border: 3;
background-color: #000;
}
.button2{
border: none;
background-color: #fff;
}
.button2:focus{
border: 3;
background-color: #000;
}
.active {
border: 4px solid #FFCC00;
outline:0;
}