jQuery Img切換Ajax文章

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具有類這表明什麼在默認情況下，它是由紅色或藍色。