Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.10.2016, 14:27
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star
 
Регистрация: 11.07.2016
Сообщений: 300

Отменить действие функции по нажатию
День добрый уважаемые. Подскажите пожалуйста, есть ли возможность отменить(обнулить/сбросить) действие функции если она уже была запущена ? Пример
<!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 действия произведенные функцией убирать ? Возврат в изначальное состояние.(Только не обновление страници разумеется =) )
Ответить с цитированием
  #2 (permalink)  
Старый 18.10.2016, 15:09
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,225

Сообщение от Black_Star
По нажатию на один из дивов им присваивается значения функция 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>
Ответить с цитированием
  #3 (permalink)  
Старый 18.10.2016, 15:09
Профессор
Отправить личное сообщение для Rasy Посмотреть профиль Найти все сообщения от Rasy
 
Регистрация: 17.06.2016
Сообщений: 509

Black_Star,
По клику по кнопке в обработчике события итерируем по каждому диву и сбрасываем значение атрибута style передав ему пустую строку, или удаляем атрибут style. Или поступаем таким же макаром используя метод фильтрации обернутого набора eq вместе с методом css, только в значения свойств передаем нулики, т.е в функцию должны передаваться параметры величин.
Ответить с цитированием
  #4 (permalink)  
Старый 18.10.2016, 21:50
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star
 
Регистрация: 11.07.2016
Сообщений: 300

Да, спасибо за советы
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как отменить действие обработчика? goody-goody Общие вопросы Javascript 15 27.12.2015 20:41
События - focusout и click отменить повторное срабатывание функции egorychmaster Элементы интерфейса 1 25.06.2015 13:35
Как отменить действие правой кнопки мыши? Dimaz Events/DOM/Window 2 20.07.2014 13:05
Отменить действие по умолчанию Lion_astana jQuery 2 14.02.2014 10:27
Поймать действие по нажатию клавиши, и запустить его перед default lexus1990 Events/DOM/Window 1 24.08.2011 15:34