用户选择类别的示例图像
嘿，我正在尝试设置一个选择，用户必须选择一个类别和第二个类别，我不知道如何获取他点击的信息。用户单击类别后，它将添加 .active，并出现下一步按钮。
单击下一步按钮后，公式器（基于他选择的类别）将淡入，我需要类别信息，因为在提交公式后，我也希望保存类别。
那么，我该如何保存他点击的信息呢？我不想使用下拉菜单或单选按钮，但如果它看起来像图像上的示例，我对其他任何东西（js/jquery，php）持开放态度。
我尝试了以下按钮：
<form id="cat1" method="post">
<input type="submit" id="1st_cat_1" class="cat1" name="cat1" value="1st cat"><br>
<input type="submit" id="1st_cat_2" class="cat1" name="cat2" value="1st cat"><br>
<input type="submit" id="1st_cat_3" class="cat1" name="cat3" value="1st cat">
</form>
我还考虑过寻找类组合（单击下一步按钮时哪个具有 .active）喜欢：
$('.cat1').click(function(){
$('.cat1').removeClass('active');
$(this).addClass('active');
})
因此，点击的类别同时具有：
/*$('.cat1.active')*/
但我不知道如何读出来，这不是我正在尝试执行的操作的完整代码，但我只需要知道数据保存部分。请帮我:(
只需更改值
<form id="cat1" method="post">
<input type="submit" id="1st_cat_1" class="cat1" name="cat1" value="apple"><br>
<input type="submit" id="1st_cat_2" class="cat1" name="cat2" value="banana"><br>
<input type="submit" id="1st_cat_3" class="cat1" name="cat3" value="orange">
</form>
您可以从此方法中获取值
$('.cat1').click(function(){
$('.cat1').removeClass('active');
$(this).addClass('active');
var v = $(this).val();//the v is apple or banana or orange
})
或者就这样
var v = $('.cat1.active').val();//the v is apple or banana or orange
您可以像这样缓存他们的选择：
var food = 'apple'
function getFood(element) {
food = document.getElementById('foods').value;
console.log(food);
}<select id="foods" onChange="getFood(this);">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange">Orange</option>
</select>