主页 / 问题 / 1135793
Accepted
Sevastopol'
Asked:2020-06-03 21:04:04 +0000 UTC2020-06-03 21:04:04 +0000 UTC

防止重复点击添加多个项目

  • 772

今天是个好日子。我有几个问题，请帮忙：

单击元素时如何a.knopka禁用多个添加<div class="block_ul"><ul><li></li></ul></div>？

当点击一个元素时，.close除了 class 之外，如何删除knopka_active添加它<div class="block_ul"><ul><li></li></ul></div>的所有元素a.knopka？

谢谢

$("a.knopka").on("click", function() {
  $(this).addClass('knopka_active').append('<div class="block_ul"><ul><li></li></ul></div>');
});

$(".close").on("click", function() {
  $("a.knopka").removeClass('knopka_active');
});
.knopka {
  display: inline-block;
  width: 100px;
  height: 100px;
  border: 1px solid black;
}
.knopka_active {
  border: 2px solid red;
}
.block_ul ul {
  list-style: none; margin: 0; padding: 0;
}
.block_ul li {
  display: inline-block;
  margin: 0; padding: 0;
  width: 10px;
  height: 10px;
  border: 1px solid green;
}
.close {
  position: absolute;
  top: 0;
  right: 0;
  border: 1px solid chocolate;
  padding: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a href="#" class="knopka"></a>
<a href="#" class="knopka"></a>
<a href="#" class="knopka"></a>

<div class="close">Отмена</div>

javascript

1 个回答

  1. Best Answer

    它可以是这样的：

    $("a.knopka").on("click", function() {
  if(!$(this).hasClass('knopka_active')) { // Проверяем отсутствие класса
    $(this).addClass('knopka_active').append('<div class="block_ul"><ul><li></li></ul></div>');
  }
});

$(".close").on("click", function() {    
  $("a.knopka").removeClass('knopka_active');
  $("a.knopka").find('.block_ul').remove(); // удаляем вложенные элементы .block_ul
});
    • 2

相关问题