javascript - 如何根据用户点击的内容保存信息(类别)

Question

example img of a category selection by user

嘿，我正在尝试设置一个选择，用户必须选择一个类别和第二个类别，但我不知道如何获取他单击的信息。用户单击类别后，它将添加 .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')*/

但我不知道如何读出来，这不是我想要做的完整代码，但我只需要知道数据保存部分。请帮助我:(

Answer 1

只需更改值

<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