jQuery Img toggle Ajax post

Question

У меня есть два изображения, когда я нажимаю на green.png, он меняется на red.png. Но когда я загружаю страницу и ее уже установлен как red.png, мне нужно дважды щелкнуть по значку img перед изменением. Мне нужно только щелкнуть один раз.

$(".page-state").toggle(function(event){ 
    this.src = "images/red.png"; 

     var id = event.target.id; //the Div ID variable   
     var dataString = 'page='+ id + '&view=off';   

     $.ajax({ 
      type: "POST", 
      url: "pageState.php", 
      data: dataString, 
      cache: false, 
     }); 
     $('#mainFrame') 
     .attr('src', $('iframe') 
     .attr('src')) 

    }, function(event) { 
     this.src = "images/green.png"; 

     var id = event.target.id; //the Div ID variable   
     var dataString = 'page='+ id + '&view=on';   

     $.ajax({ 
      type: "POST", 
      url: "pageState.php", 
      data: dataString, 
      cache: false, 
     }); 
     $('#mainFrame') 
     .attr('src', $('iframe') 
     .attr('src')) 
    }); 

Как я могу улучшить это?

Answer 1

JQuery:

$(".page-state").click(function() { 
    var s = $(this).attr("class").split(" "); 
    if(s[1] == 'red') { 
     this.src = 'green.png'; 
     $(this).removeClass('red').addClass('green'); 
     // more code for green 
    } 
    else { 
     this.src = 'red.png'; 
     $(this).removeClass('green').addClass('red'); 
     // more code for red image 
    } 
}); 

HTML:

<img class="page-state red" src="red.png" /> 

Как вы можете видеть, что .page-state есть класс, который указывает на то, что по умолчанию, она состоит красного или синего цвета.