Question

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

$(".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);导致您的问题。我重写了你的代码来规避这个。我们应该使用<li>选择器，而不是使用html()找到特定的contains()。

＆＃13;

$(".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();
  }
  
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

使用jquery在同一按钮上添加和/或删除li

1 个答案: