添加 and/or 在同一个按钮上删除 li 单击 jquery

Question

我有一组按钮，它们都有 class '.skills'。当我单击一个按钮时，我想切换 class 'btn-clicked' 并将按钮文本添加到 ul 内的 li。这个我有工作。当我再次单击该按钮时，我想删除 'btn-clicked' class（切换 class 成功）并从 ul 中删除 li。我有以下代码，它添加 'btn-clicked' class 并在第一次点击时将 li 添加到 ul，但在第二次点击时，它不会从 ul.

$(".skills").on("click", function() {

  var $this = $(this);
  var $ul = $('.previewSkillsRequired');
  var $btnText = $this.text();
  var $li = $('<li/>').html($btnText);

  $this.toggleClass('btn-clicked');

  if($this.hasClass('btn-clicked')) {
    $ul.append($li);
  } else {
    $ul.find($li).remove();
  }
});

Answer 1

var $li = $('<li/>').html($btnText); 导致了您的问题。我重写了您的代码以规避此问题。与其使用 html() 查找特定的 <li>，不如使用 contains() 选择器。

$(".skills").on("click", function() {

  var $this = $(this);
  var $ul = $('.previewSkillsRequired');
  var $btnText = $this.text();

  $this.toggleClass('btn-clicked');

  if($this.hasClass('btn-clicked')) {
    $ul.append('<li>' + $btnText + '</li>');
  } else {
    $ul.find('li:contains(' + $btnText + ')').remove();
  }
  
});

.btn-clicked {
  background-color: #33ffff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="skills">Button Text</button> <button class="skills">Other Button</button>
<br>
<ul class="previewSkillsRequired">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

添加 and/or 在同一个按钮上删除 li 单击 jquery

add and/or remove li on same button click with jquery

jquery

click

button

html-lists