JQuery quiz app - use <id> tag to toggle variable on/off
I am writing a jquery phonegap quiz app and have a number of categories from which a user can select via checkbox. Relevant questions belonging to those categories are then returned. However, I have two huge switch statements to change the relevant variables from 0 to 1 if the checkbox for that category is selected and vice versa (this info is used to build a compound db query).
The value of the variable behind the checkbox is only ever 0 or 1, so is there a better way to do this?
My HTML is:
<h2>Categories</h2>
<ul class="rounded">
<li>Cardiology<span class="toggle"><input type="checkbox" id="cardiology" /></span></li>
<li>Respiratory<span class="toggle"><input type="checkbox" id="respiratory" /></span></li>
<li>Gastrointestinal<span class="toggle"><input type="checkbox" id="gastrointestinal" /></span></li>
<li>Neurology<span class="toggle"><input type="checkbox" id="neurology" /></span></li>
</ul>
My Javascript is along the lines of:
var toggle_cardiology = 0;
var toggle_respiratory = 0;
var toggle_gastrointestinal = 0;
var toggle_neurology = 0;
$(function() {
$('input[type="checkbox"]').bind('click',function() {
if($(this).is(':checked'))
{
switch (this.id)
{
case "cardiology":
toggle_cardiology = 1;
break;
case "respiratory":
toggle_respiratory = 1;
break;
case "gastrointestinal":
toggle_gastrointestinal = 1;
break;
case "neurology":
toggle_neurology = 1;
break;
etc. (which is cumbersome with 10+ categories plus an else开发者_开发技巧 statement with a switch to change them back)
I'm thinking of something along the lines of concatenating the HTML id tag onto the "toggle_" prefix - in pseudocode:
if (toggle_ + this.id == 1){
toggle_ + this.id == 0}
if (toggle_ + this.id == 0){
toggle_ + this.id == 1}
Thanks, Nick.
var toggle = {"cardiology":0,"respiratory":0,"gastrointestinal":0,"neurology":0};
$(function() {
$('input:checkbox').bind('click', function() {
toggle[this.id] = $(this).is(':checked') ? 1 : 0;
//Debug:To check the current values : begin
var s = "";
$.each(toggle, function(i, val){
s += i + ":" + toggle[i] + " ";
})
alert(s);
//Debug:To check the current values : end
})
})
var toggle = {
cardiology: 0,
respiratory: 0
}
$(function() {
$('input[type="checkbox"]').bind('click',function() {
toggle[this.id] = ~~($(this).is(':checked'));
});
});
$(this).is(':checked') returns true/false. Using the double bitwise NOT operator, you get 1 or 0.
edit: You should use an object to store the toggle states so you can access them dynamically.
Dynamic variables?
if($(this).is(':checked')){
window["toggle_"+this.id] = 1;
}
EDIT:
Shortened:
window["toggle_"+this.id] = ($(this).is(':checked'));
精彩评论