所以我有这个按钮
<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>
答案 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">