使用jquery切换id并显示计数器

尝试切换id时遇到问题（我只能切换样式，请参见示例：）。它应该看起来像一个按钮，当单击它时，它会更改为下一个按钮id

另外，我也不知道如何将类值相加，得到一个总数

html:

描述您的总体健康状况：



你吸烟吗




选择您的体重类别：

重量不足（-1）
正常重量（1）
超重（-1）


你喝酒吗？

第（1）号
是（-1）


健康总分：1

脚本：

            $("#general-health").toggle(
              function () {
                $(this).css({"background-color":"red"});<!-- change this to #general-health1 id-->
              },
              function () {
                $(this).css({"background-color":"black"});<!-- change this to #general-health2 id-->
              },
              function () {
                $(this).css({"background-color":"grey"});<!-- change this to #general-health3 id-->
              },
              function () {
                $(this).css({"background-color":"green"});<!-- change this to #general-health4 id-->
              }
            );

            $("#smoking").toggle(
              function () {
                $(this).css({"background-color":"red"});<!-- change this to #smoking1 id-->
              },
              function () {
                $(this).css({"background-color":"black"});<!-- change this to #smoking2 id-->
              },
              function () {
                $(this).css({"background-color":"grey"});<!-- change this to #smoking3 id-->
              }
            );

            <!-- Below code is not working-->
            $(document).ready(function(){
            $(".calc").each(function() {
                $(this).keyup(function(){
                    calculateSum();
                });
            });
            });
            function calculateSum() {
                var sum = 0;
                $(".calc").each(function() {

                });
                $("#sum").html();
            }

$（“#一般健康状况”）。切换(
函数（）{
$（this.css（{“背景色”：“红色”}）；
},
函数（）{
$（this.css（{“背景色”：“黑色”}）；
},
函数（）{
$（this.css（{“背景色”：“灰色”}）；
},
函数（）{
$（this.css（{“背景色”：“绿色”}）；
}
);
$（“#吸烟”）。切换(
函数（）{
$（this.css（{“背景色”：“红色”}）；
},
函数（）{
$（this.css（{“背景色”：“黑色”}）；
},
函数（）{
$（this.css（{“背景色”：“灰色”}）；
}
);
$（文档）.ready（函数（）{
$（“.calc”）。每个（函数（）{
$（this）.keyup（function（）{
计算um（）；
});
});
});
函数calculateSum（）{
var总和=0；
$（“.calc”）。每个（函数（）{
});
$（“#sum”）.html（）；
}

---

到目前为止，这就是我对你帖子的评论的回复，使用改变id听起来不正确；更改当前活动按钮和“下一步”按钮的类别听起来更可行。哦，顺便说一句，主观的：在一项调查中，我宁愿看到所有选项，如下拉框、单选按钮组、滑块或。。。我不打算使用下拉菜单，因为它更像是一个状态栏，可以增减（从健康到不健康）。你关于这门课的想法听起来不错，谢谢。我怎么换课？

            $("#general-health").toggle(
              function () {
                $(this).css({"background-color":"red"});<!-- change this to #general-health1 id-->
              },
              function () {
                $(this).css({"background-color":"black"});<!-- change this to #general-health2 id-->
              },
              function () {
                $(this).css({"background-color":"grey"});<!-- change this to #general-health3 id-->
              },
              function () {
                $(this).css({"background-color":"green"});<!-- change this to #general-health4 id-->
              }
            );

            $("#smoking").toggle(
              function () {
                $(this).css({"background-color":"red"});<!-- change this to #smoking1 id-->
              },
              function () {
                $(this).css({"background-color":"black"});<!-- change this to #smoking2 id-->
              },
              function () {
                $(this).css({"background-color":"grey"});<!-- change this to #smoking3 id-->
              }
            );

            <!-- Below code is not working-->
            $(document).ready(function(){
            $(".calc").each(function() {
                $(this).keyup(function(){
                    calculateSum();
                });
            });
            });
            function calculateSum() {
                var sum = 0;
                $(".calc").each(function() {

                });
                $("#sum").html();
            }