javascript - not(this) 方法不适用于按钮 (jQuery)

Question

我想让“添加事件”按钮在单击每个文本时随着文本的颜色出现和消失。在这里，当我点击一个文本两次时，它可以工作(按钮出现然后消失)，但是当我点击一个文本然后点击另一个文本时，第一个文本上出现的“添加事件”按钮不会被删除当出现下一个按钮时。我想要的是在点击的文本前面创建一个按钮，当文本未被选中时，该按钮也应该被删除。

$('li').click(function() {

  $(this).addClass('abc');
  $(this).toggleClass('active abc');

  if ($('li').hasClass('active')) {
    $(this).append('<button type="button" class="bttn1">Add Event</button>');
  } else {
    $('button').remove();
  }

  $('li').not(this).removeClass('active abc');
});

.active {
  color: red;
  font-size: 25px;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>Hello?</li>
  <li>Yes this is dog</li>
</ul>

Answer 1

这一行:

  if ($('li').hasClass('active')) {

没有遍历所有 <li> ，测试它们中的每一个并做出这个决定。如果任何 <li> 则为真处于事件状态，然后它会在点击的<li>上添加一个按钮(即使它已经有一个按钮)。

先做所有的类更新，然后可以使用选择器在选择<li>之后添加按钮.

$('li').click(function() {

  $(this).addClass('abc');
  $(this).toggleClass('active abc');
  $('li').not(this).removeClass('active abc');
  $('button.bttn1').remove();

  $('li.active').append('<button type="button" class="bttn1">Add Event</button>');
});

.active {
  color: red;
  font-size: 25px;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>Hello?</li>
  <li>Yes this is dog</li>
</ul>