javascript - Toggling through values of a Json object using Jquery -

i have list of tasks can have 4 possible states taken json object.

"not done", "done", "doing", "later"

this states stored in object loaded via json.

var states = {  status: ['doing','done', 'later' ]  }; 

tasks loaded json object.

var tasks = [     {id: 1, text: 'do something.', status: 'doing'},     {id: 2, text: 'undo thing.', status: 'done'},     {id: 3, text: 'redo again.', status: 'started'},     {id: 4, text: 'responsive', status:'later'}   ]; 

the html this.

<ul> <li><a href="#1">do - <span class="status">doing</span> </a></li> <li><a href="#2">undo thing - <span class="status">done</span> </a></li> <li><a href="#2">redo again. - <span class="status">started</span> </a></li> </ul> 

each time user clicks on link status should toggle value states object , loop through them. example, when use click on task status done, should become later , when click again should become not done. should keep looping each time user clicks.

what best way this. felt if else won't right way if values of states increase or reduce code have revisited again.

edit:

i didn't understand 100% of question. think now. want code work on cases @ time. i've made code little safer now:

• if state contain faulty entered text (like 'done') still compare.
• if task has faulty (=non-existent) state, reset first state available.

here's explosion of code, i'm little tired might need refactor parts. thought easier documentation included.

if have more things say, leave in comments , try again....!

working jsfiddle: http://jsfiddle.net/kychan/62sux/2/

// //    retrieve data $.get()/ajax or inline //    echo through php/asp. //  //    states. make code fuzzy. var states = {  status: ['doing','done', 'later' ]  };  //    tasks. //    in example more quickly. var tasks = [     {id: 1, text: 'do something.',     status: 'doing'},     {id: 2, text: 'undo thing.',  status: 'done'},     {id: 3, text: 'redo again.',    status: 'started'},     {id: 4, text: 'responsive',        status: 'later'} ];  //    prepare retrieved json data fuzzy input. states.status.foreach(function(e,i,a) {     states.status[i]=e.touppercase(); }); tasks.foreach(function(e,i,a) {     tasks[i].status=e.status.touppercase(); });  //    create li's. (var in tasks) {     var item = '<li>'              + '<a href="#" id="{id}">{text} - '              + '<span class="status">{status}</span>'              + '</a>'              + '</li>'     ;      item    = item.replace(/{(\w+)}/g, function (m, n) {         return (typeof (tasks[i][n]) !== 'undefined') ? tasks[i][n] : '';     });      $('ul').append(item); }  //    override states button; make harder //    code , test future proofness. $('.replace').click(function() {     //    keep 'done' testing.     states = {         status:['concept', 'elaboration', 'construction', 'testing', 'production', 'done']     };     //    remove replace link, because after press it's useless.     $('.replace').detach(); });  // //    actual code. //  //    create listeners on tags of tag ul. $('ul a').click(function (e) {     //    fetch status dom object , text before.     var status = $(this).children('.status');     var text   = status.html();      //    iterate through states array.     (var in states.status) {         //    if task matches text, update next.         if (text==states.status[i]) {             //    next status.             if ((i++)>=states.status.length-1)  i=0;              //    update. don't forget push update database.             status.html(states.status[i]);             return;         }     }     //    state not found. reset first. don't forget push update db.     status.html(states.status[0]); });