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

Question

尝试切换 ID 时遇到问题(我只能切换样式，请参阅示例: http://jsfiddle.net/5CFwA/2/ )。它应该看起来像一个按钮，单击时会更改为下一个按钮 ID。

此外，我不知道如何将类别值加在一起以获得总计。

html:

            Describe your general health: 
            <span id="general-health">
                <span id="general-health1" class="calc button-border" value="1"><img src="http://rt4a.com/icon-tick.png"> <a href="#">Healthy (1)</a></span><!-- show this id until toggle -->
                <span id="general-health2" class="calc button-border" value="0" style="display:none;"><img src="http://rt4a.com/icon-question.png"> <a href="#">Unsure (0)</a></span>
                <span id="general-health3" class="calc button-border" value="-1" style="display:none;"><img src="http://rt4a.com/icon-cross.png"><a href="#">Sick (-1)</a></span>
                <span id="general-health4" class="calc button-border" value="-2" style="display:none;"><img src="http://rt4a.com/icon-cross.png"> <img src="icon-cross.png"> <a href="#">Extremely Sick (-2)</a></span>
            </span>

            <br><br>

            Do you smoke:
            <span id="smoking">
                <span id="smoking1" class="calc button-border" value="0"><img src="http://rt4a.com/icon-empty.png"> <a href="#">Non-smoker (0)</a></span><!-- show this id until toggle -->
                <span id="smoking2" class="calc button-border" value="-1" style="display:none;"><img src="http://rt4a.com/icon-cross.png"> <a href="#">0&gt;2 Packets per week (-1)</a></span>
                <span id="smoking3" class="calc button-border" value="-2" style="display:none;"><img src="http://rt4a.com/icon-cross.png"> <img src="http://rt4a.com/icon-cross.png"> <a href="#">2+ packets per week (-2)</a></span>
            </span>

            <br>
            <br>

            <form id="form-weight">
            Select your weight category:<br>
            <input type="radio" name="weight" class="calc" value="-1" />Under weight (-1)
            <input type="radio" name="weight" class="calc" value="1" checked />Normal weight (1)
            <input type="radio" name="weight" class="calc" value="-1" />Overweight (-1)
            </form>

            <br>

            <form id="form-alcohol">
            Do you drink?<br>
            <input type="radio" name="alcohol" class="calc" value="1" />No (1)
            <input type="radio" name="alcohol" class="calc" value="-1" checked />Yes (-1)
            </form>

            <br>

            <strong>Health total score:</strong> <span id="sum">1</span><!-- When page loads it should add up the current .calc class and change after being toggled instantly without having to load a new page -->

            <!-- Example: If 'extremely sick'(-2), '2+ packets per week'(-2), 'normal weight'(1) and 'yes'(-1) is selected, the score should say "-4" -->

脚本:

            $("#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();
            }

到目前为止，这就是我所拥有的http://jsfiddle.net/5CFwA/2/

Answer 1

在回复您帖子的评论时，请使用 toggleClass()