无法尝试切换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>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/