如何在Jquery中循环一个按钮

时间:2014-10-18 16:21:20

标签: jquery

所以我有这个按钮

<input type="button" value="change" id="change" onclick="go()" class="button">

和这个功能

function go(){
		$("#theImage").attr("src", "heart.jpg");
};

我还在文件根目录中保存了另一张图片。

因此,当我按下按钮时,图片会变为另一张图片,该部分有效,但是当我再次按下它时,它不会将图片更改为下一张(或之前的图片),我该如何才能使图片工作?

完整代码:

<!doctype html> 
<html> 
<head> 
<title>A Basic Form</title> 
<script type="text/javascript"  src="jquery-1.8.1.min.js"></script>
<link rel="stylesheet" type="text/css">
<style type="text/css" href="Template.css"> 

</style> 
</head> 
<body>
<input type="button" value="change" id="change" onclick="go()" class="button">

<img src="square.jpg" alt="square" id="theImage" />
<script type="text/javascript"> 

function go(){
		$("#theImage").attr("src", "heart.jpg");
};

	
</script>
</body> 
</html>

2 个答案:

答案 0 :(得分:1)

您可以执行以下操作来切换图像:

function go(){
    var src = ($("#theImage").attr('src') === 'square.jpg') ? 'heart.jpg'  : 'square.jpg';
    $("#theImage").attr('src', src);
}

答案 1 :(得分:0)

您已将其更改为heart.jpg。现在,如果您想设置一种循环,请使用此javascript:

<script>
var i = 0;
var imgarray = ['1.jpg', '2.jpg' ...];

function go(){
        $("#theImage").attr("src", imgarray[i]);
        i++;
}

</script>

并且

<input type="button" value="change" id="change" onclick="go()" class="button">