主页 / 问题 / 658970
Accepted
Максим
Asked:2020-04-27 01:45:37 +0000 UTC2020-04-27 01:45:37 +0000 UTC

连续按下按钮

  • 772

大家好。请告诉我。我怎样才能做到当您点击“1 区”，然后点击“2 区”，然后点击“删除”时，警报只显示 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>

javascript

3 个回答

  1. Best Answer

    按钮单击处理程序中代码的奇怪行为是Удалить合理的。发生的事情是您在 click handler 中'.region-edit'创建了一个 button click handler Удалить。也就是你点击'.region-edit'的次数，你会创建这个代码块的次数：

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

    稍后将导致这样一个事实，即通过单击按钮Удалить，您将按照添加它们的顺序一遍又一遍地调用处理程序。为了使代码执行您在问题中指出的操作，例如，取出一个全局变量就足够了，如果您想将其存储在 JS 代码中，或者您可以将其存储在hidden页面中，或者在属性方面，一般来说，有很多做法，如果我们拿出一个变量var text = "";来存储最后一次点击的文本，它会更直观'.region-edit'。

    至于button click handler Удалить，应该是从click handler on上取出来的'.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

  2. 该构造$(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>

    • 0

  3. 一些纯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

相关问题