1

Всем привет. Подскажите пожалуйста. Как сделать что бы при нажатии на "Зона 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>

3 ответа 3

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>

1
  • Большое спасибо всем участникам. Особенно автору данного ответа) Commented 26 апр. 2017 в 20:43
0

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

0

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

4
  • ну хоть парочку слов объяснения можно почему именно это надо делать и что не так было у ТС? Commented 26 апр. 2017 в 18:03
  • @Алексей Шиманский, ну грубо говоря клиент нажимает на кнопку "зона 1" и нажимает удалить. Сейчас выходит что нажимая на зону 1 и зону 2 (вдруг захочет поменять решение) , а потом на удалить, удаляет 2 кнопки вместо последней. Что за ТС? Commented 26 апр. 2017 в 18:11
  • 2
    @Максим ТС - это ты .. Топик Стартер)) ....я от ответчика просил объяснения, чтоб ты понял что у тебя не так и что в этом коде в ответе невнятное творится. Commented 26 апр. 2017 в 18:14
  • @Алексей Шиманский, а ну это да) Commented 26 апр. 2017 в 18:26

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.