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>處於活動狀態，則為true，然后它將為單擊的<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> 

Answer 2

嘗試類似的東西;-)

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

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

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

});