如何缩短这个jquery函数？

-1

<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中有一堆代码。那么我怎么缩短它呢？

来源

2013-03-08 Kenneth Ma

你想循环所有div的相同的三个图像？ – 2013-03-08 21:12:50

检查属性选择器：http://api.jquery.com/attribute-equals-selector/ – bygrace 2013-03-08 21:13:39

你想缩短你的js函数或不重复每个单元格吗？ – bygrace 2013-03-08 21:16:34

如果所有的元素都经历了相同的图像周期，你可以使用类以及活动适用于所有的人。例如：

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

来源

2013-03-08 21:15:13

非常感谢你！ – 2013-03-08 21:40:31

没问题。如果这是你正在寻找的答案，随时接受它。无论哪种情况，我都会建议编辑您的问题，以更具体地表达您是否希望缩短功能，或者将其应用于所有div。 – 2013-03-08 21:42:36

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

来源

2013-03-08 21:14:16

不应该是*最后一种情况*'默认'？ – 2013-03-08 21:17:58

@ shiplu.mokadd.im - 我会更正它，这应该是默认的。 – 2013-03-08 21:18:52

我不知道它是多么干净，但不应该是这样的工作？

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

来源

2013-03-08 21:16:31 GJK

你可以你的源代码映射到一个对象，像这样：

$("#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秒。

来源

2013-03-08 21:17:13

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

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

来源

2013-03-08 21:29:32

如何缩短这个jquery函数？

回答

相关问题