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

Максим

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

Пример

$('body').on('click', '.region-edit', function() {
	var text = $(this).text();
  $('#del_btn').click(function() {
    alert(text);
  });
});
<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>
3 ответа

Максим

Странное поведение кода, внутри обработчика нажатия на кнопку Удалить обоснованно. Что получается, что вы внутри обработчика клика на '.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);
});
<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>


Максим

Немного чистого 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>


Максим

Конструкция $(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);
  });
});
<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>

licensed under cc by-sa 3.0 with attribution.