2014-10-18 2 views
-2

Так что я эту кнопкуКак петля кнопка в Jquery

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

и эта функция

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

и у меня есть еще один снимок сохранен в file root.

Поэтому, когда я нажимаю кнопку, изображение меняется на другое изображение, эта часть работает, но когда я нажимаю ее снова, она не меняет картинку на следующую (или предыдущую), как я могу заставить ее работать?

Полный код:

<!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(){ 
 
\t \t $("#theImage").attr("src", "heart.jpg"); 
 
}; 
 

 
\t 
 
</script> 
 
</body> 
 
</html>

+2

Что следующее или предыдущее изображение? Все, что вы делаете, говорит, что образ меняется на heart.jpg. Он ничего не сделает. – haxtbh

+0

его квадрат, но как я могу заставить его работать, как если бы я продолжал настаивать, он будет меняться каждый раз. – Den

+1

Вы просто хотите переключаться между этими двумя изображениями или у вас есть больше изображений, которые вы хотите добавить? – haxtbh

ответ

1

Вы можете сделать что-то подобное, что будет переключать изображения:

function go(){ 
    var src = ($("#theImage").attr('src') === 'square.jpg') ? 'heart.jpg' : 'square.jpg'; 
    $("#theImage").attr('src', src); 
} 
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"> 
+0

, так что я получил это: var i = 0; var imgarray = ["square.jpg", "heart.jpg"]; функция go() { \t \t $ ("# theImage"). Attr ("src", imgarray [i]); \t \t i ++; }; Но, похоже, это не работает? – Den

+0

Его работа на моем конце. Проверьте консоль на наличие ошибок. – mehulmpt

+1

'i ++' должен быть 'i = (i + 1)% imgarray.length' – Stryner

Смежные вопросы