Q:

how to shorten this jquery function?

so I have a 3 by 3 table like this:
<table border="1">
  <tr>
    <td><img src="blank.png" alt="blank" id="one"/></td>
    <td><img src="blank.png" alt="blank" /></td>
    <td><img src="blank.png" alt="blank" /></td>
  </tr>
  <tr>
    <td><img src="blank.png" alt="blank" /></td>
    <td><img src="blank.png" alt="blank" /></td>
    <td><img src="blank.png" alt="blank" /></td>
  </tr>
  <tr>
    <td><img src="blank.png" alt="blank" /></td>
    <td><img src="blank.png" alt="blank" /></td>
    <td><img src="blank.png" alt="blank" /></td>
  </tr>
</table>

in my javascript, I have:
$("#one").click(function() {

    var src = $("#one").attr("src");

    if (src == "blank.png") {
        $(this).attr("src", "hello.png");
    }
    else if (src == "hello.png") {
        $(this).attr("src", "hi.png");
    }

    else {
        $(this).attr("src", "blank.png");
    }       
});

this switches the first cell of the table between 3 images when a user click on it. I know that if I have all 9 unique IDs for each cell, it will work, but I don't want to have a whole mess of codes in my javascipt. so how do I shorten it?  

A:

Use a switch statement
$("#one").click(function() {
 switch(this.getAttribute("src")){
  case "blank.png":this.setAttribute("src","hello.png");break;
  case "hello.png":this.setAttribute("src","hi.png");break;
  default:this.setAttribute("src","blank.png");break;
 }
});

here is a demo: http://jsfiddle.net/9jMHS/1

A:

If all elements are going through the same image cycle you can use a class and apply your event to all of them. For instance:
<td><img src="blank.png" alt="blank" class="image-cycle"/></td>

And bind your javascript to all elements with that class:
$('.image-cycle').click( function () {
    // your code
    // the only thing that will have to change is 
    var src = $(this).attr("src");
}

