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>'); });之后添加按钮。

＆＃13;

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

＆＃13;

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

＆＃13;

Button.bg="green"

＆＃13;

Answer 2

尝试类似的东西; - ）

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

  $('li').removeClass('active');
  $(this).addClass('active'); 

  $('button').remove();
  $(this).append('<button type="button" class="bttn1">Add Event</button>');

});

not（this）方法不适用于按钮（jQuery）

2 个答案: