Отменить действие функции по нажатию
День добрый уважаемые. Подскажите пожалуйста, есть ли возможность отменить(обнулить/сбросить) действие функции если она уже была запущена ? Пример
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <style type="text/css"> #field { position: relative; width: 300px; height: 300px; background-color: red; } .square { position: absolute; width: 50px; height: 50px; background-color: black; border: 1px solid white; color: white; font-size: 1.5em; text-align: center; cursor: pointer; } .square:nth-child(1) { top: 10%; left: 20%; } .square:nth-child(2) { top: 40%; left: 20%; } .square:nth-child(3) { top: 60%; left: 20%; } .square:nth-child(4) { top: 80%; left: 20%; } #bottom{ width: 300px; height: 100%; background-color: green; cursor: pointer; font-size: 1.5em; color: white; } </style> <script type="text/javascript"> window.onload = function() { $(function() { // alert('vse ok'); $('#field').on('click', 'div', function() { move(); }); $('#button').on('click', function() { // сюда надо что-то написать ? =) }) }); function move () { var newDiv = $('#field > div'); newDiv.eq(0).css({'top':'5%', 'left':'41%'}); newDiv.eq(1).css({'top':'15%', 'left':'57%'}); newDiv.eq(2).css({'top':'65%', 'left':'57%'}); newDiv.eq(3).css({'top':'65%', 'left':'25%'}); } } </script> </head> <body> <div id="field"> <div class="square">1</div> <div class="square">2</div> <div class="square">3</div> <div class="square">4</div> </div> <div id="button">Clear function</div> <!-- <script type="text/javascript" src="javascript.js"> </script> --> </body> </html> По нажатию на один из дивов им присваивается значения функция move(); Как по нажатию на элемент #button действия произведенные функцией убирать ? Возврат в изначальное состояние.(Только не обновление страници разумеется =) ) |
Цитата:
<!DOCTYPE html> <html> <head> <meta http-equiv='Content-Type' content='text/html; charset=windows-1251' /> <script src='http://code.jquery.com/jquery-latest.js'></script> <!-- <script src="https://code.angularjs.org/1.3.9/angular.min.js"></script> <script src="https://code.angularjs.org/1.3.9/angular-route.js"></script> --> <style type='text/css'> #field { position: relative; width: 300px; height: 300px; background-color: red; } .square { position: absolute; width: 50px; height: 50px; background-color: black; border: 1px solid white; color: white; font-size: 1.5em; text-align: center; cursor: pointer; } .square:nth-child(1) { top: 10%; left: 20%; } .square:nth-child(2) { top: 40%; left: 20%; } .square:nth-child(3) { top: 60%; left: 20%; } .square:nth-child(4) { top: 80%; left: 20%; } #bottom{ width: 300px; height: 100%; background-color: green; cursor: pointer; font-size: 1.5em; color: white; } </style> <script type='text/javascript'> $(function() { $('#field').on('click', 'div', move); $('#button').on('click', function() { // сюда надо что-то написать ? =) var newDiv = $('#field > div'); newDiv.eq(0).css({'top':'', 'left':''}); newDiv.eq(1).css({'top':'', 'left':''}); newDiv.eq(2).css({'top':'', 'left':''}); newDiv.eq(3).css({'top':'', 'left':''}); }) }); function move () { var newDiv = $('#field > div'); newDiv.eq(0).css({'top':'5%', 'left':'41%'}); newDiv.eq(1).css({'top':'15%', 'left':'57%'}); newDiv.eq(2).css({'top':'65%', 'left':'57%'}); newDiv.eq(3).css({'top':'65%', 'left':'25%'}); } </script> </head> <body> <div id="field"> <div class="square">1</div> <div class="square">2</div> <div class="square">3</div> <div class="square">4</div> </div> <div id="button">Clear function</div> </body> </html> |
Black_Star,
По клику по кнопке в обработчике события итерируем по каждому диву и сбрасываем значение атрибута style передав ему пустую строку, или удаляем атрибут style. Или поступаем таким же макаром используя метод фильтрации обернутого набора eq вместе с методом css, только в значения свойств передаем нулики, т.е в функцию должны передаваться параметры величин. |
Да, спасибо за советы
|
Часовой пояс GMT +3, время: 19:44. |