Question

所以我有一个像这样的3乘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

使用开关声明

$("#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语句，并且可以轻松扩展该对象以添加更多src s。

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

如何缩短这个jquery函数？

5 个答案: