javascript - 如何缩短这个jquery函数？

Question

所以我有一个像这样的 3 x 3 表：

<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>

在我的 javascript 中，我有：

$("#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");
    }       
});

当用户单击它时，这会在 3 个图像之间切换表格的第一个单元格。我知道如果每个单元格都有 9 个唯一 ID，它会起作用，但我不想在我的 javascipt 中有一大堆代码。那么我该如何缩短它呢？

Answer 1

使用 switch 语句

$("#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;
 }
});

这是一个演示：http: //jsfiddle.net/9jMHS/1

Answer 2

如果所有元素都经历相同的图像周期，您可以使用一个类并将您的事件应用于所有元素。例如：

<td><img src="blank.png" alt="blank" class="image-cycle"/></td>

并将您的 javascript 绑定到具有该类的所有元素：

$('.image-cycle').click( function () {
    // your code
    // the only thing that will have to change is 
    var src = $(this).attr("src");
}

Answer 3

您可以将源映射到对象，如下所示：

$("#one").click(function() {
    var srcs = {
        "blank.png": "hello.png",
        "hello.png": "hi.png",
    }, src = $("#one").attr("src");

    $(this).attr("src", srcs[src] || "blank.png");
});

这样您就可以避免笨拙和难看的switch语句，并且可以轻松地扩展对象以添加更多srcs。

Answer 4

我不知道它有多干净，但这样的东西不应该工作吗？

$("#one").click(function() {
    var src = $(this).attr("src");
    var img = ["blank.png", "hello.png", "hi.png"];
    $(this).attr("src", img[(img.indexOf(src.toLowerCase())+1)%3]);
});

Answer 5

var src = this.getAttribute("src");

this.src = src == "blank.png" ? "hello.png" :
           src == "hello.png" ? "hi.png"    :
                                "blank.png";