Поочередное нажатие на кнопки

217

28 апреля 2017, 19:21

Всем привет. Подскажите пожалуйста. Как сделать что бы при нажатии на "Зона 1" потом на "Зона 2", а потом на "Удалить", alert выводил только Зона 2? Я так понимаю событие нажатия на region-delit копятся, но не знаю как их можно подчистить.

Пример

$('body').on('click', '.region-edit', function() { 
	var text = $(this).text(); 
  $('#del_btn').click(function() { 
    alert(text); 
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<button class="uk-button uk-button-primary uk-button-small region-edit">Зона 1</button> 
<button class="uk-button uk-button-primary uk-button-small region-edit">Зона 2</button> 
<button class="uk-button uk-button-primary uk-button-small region-edit">Зона 3</button> 
 
<button id="del_btn" class="uk-button uk-button-primary uk-button-small">Удалить</button>

Answer 1

Странное поведение кода, внутри обработчика нажатия на кнопку Удалить обоснованно. Что получается, что вы внутри обработчика клика на '.region-edit' создаете обработчик клика на кнопку Удалить. То есть, сколько раз вы кликните на '.region-edit', столько раз вы и создадите этот блок кода:

$('#del_btn').click(function() {
  alert(text);
});

Что в последствии приведет к тому, что кликнув на кнопку Удалить вы раз за разом вызовете обработчики в той последовательности, в которой они были добавлены. Чтобы код выполнял то, что вы указали в своем вопросе - достаточно вынести, к примеру, глобальную переменную, если хотите хранить в JS-коде, либо можно хранить в hidden на странице, либо в аттрибутах, в общем, подходов масса, более наглядно будет, если вынесем переменную var text = ""; в которой будет храниться текст последнего кликнутого '.region-edit'.

Что касается обработчика нажатия на кнопку Удалить - его следует вынести из обработчика клика на '.region-edit', просто положите его рядом, чтобы был один его экземпляр.

var text = ""; 
 
$('body').on('click', '.region-edit', function() { 
  text = $(this).text(); 
}); 
 
$('#del_btn').click(function() { 
  alert(text); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<button class="uk-button uk-button-primary uk-button-small region-edit">Зона 1</button> 
<button class="uk-button uk-button-primary uk-button-small region-edit">Зона 2</button> 
<button class="uk-button uk-button-primary uk-button-small region-edit">Зона 3</button> 
 
<button id="del_btn" class="uk-button uk-button-primary uk-button-small">Удалить</button>

Answer 2

Немного чистого js и творчества:

let buttons = document.querySelectorAll('button'); 
let button_text; 
let button_id; 
 
Array.from(buttons).forEach(function(el, i) { 
	 
	el.addEventListener('click', function(){ 
		if(el.id == 'del_btn' ) { 
			if(button_text !== undefined) { 
				document.querySelector('.red').classList.add('down'); 
				console.log('delete', button_text) 
			} 
			 
		} else { 
			for(let value of buttons) { 
				if(value.classList.contains('red')) { 
					value.classList.remove('red') 
				} else { 
					el.classList.add('red') 
				}	 
			} 
			button_text = el.innerText; 
			console.log(el.id, el.innerText) 
		}		 
	}) 
})

.red { 
	background: red; 
} 
.down { 
	background: inherit; 
	transform: scale(0.75); 
	opacity: 0.75; 
	transition: 400ms; 
}

<button id="Button_1" class="uk-button uk-button-primary uk-button-small region-edit">Зона 1</button> 
<button id="Button_2" class="uk-button uk-button-primary uk-button-small region-edit">Зона 2</button> 
<button id="Button_3" class="uk-button uk-button-primary uk-button-small region-edit">Зона 3</button> 
 
<button id="del_btn" class="uk-button uk-button-primary uk-button-small">Удалить</button>

Answer 3

Конструкция $(function() { ... }); эквивалентна следующей:

$(document).ready(function() {
  ...
});

Конструкция text && alert(text); эквивалентна следующей:

if (text) {
  alert(text);
}

С этим условием alert() сработает только после нажатия одной из Зона # кнопок.

Пример:

$(function() { 
  var text = ''; 
  $('.region-edit').click(function() { 
    text = $(this).text(); 
  }); 
  $('#del_btn').click(function() { 
    text && alert(text); 
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<button class="uk-button uk-button-primary uk-button-small region-edit">Зона 1</button> 
<button class="uk-button uk-button-primary uk-button-small region-edit">Зона 2</button> 
<button class="uk-button uk-button-primary uk-button-small region-edit">Зона 3</button> 
 
<button id="del_btn" class="uk-button uk-button-primary uk-button-small">Удалить</button>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Необычный слайдер на базе Slick

Задумка такая: есть слайдер, у которого через 3 сек меняется backgroung-image и еще через 3 сек происходит переход на следующий слайдВ итоге мы получаем...

298

CSS