單擊button1並將文本添加到div，單擊button2並刪除文本和CSS樣式button1

Question

當我單擊.add-btn時，我將.add-btn的樣式更改為background：#cccccc並將val（）更改為“-”。

現在，當我使用tr td .list刪除列表中的一行添加的文本時，我想要那個.add-btn按鈕，該按鈕將刪除的行添加為樣式，回到背景：＃232323，使用val（）“ +”。

我的問題是，有10個具有類名.add-btn的按鈕，現在如何單擊10個按鈕中的哪個按鈕來添加文本？

 jQuery("tr td .list").live('click', function() { jQuery(this).closest("tr td").remove(); }); jQuery(".add-btn").click(function(event) { jQuery(this).val("-"); jQuery(this).css("background", "#cccccc"); event.stopImmediatePropagation(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <tbody> <tr></tr><tr><td><div class="list"><p class="delete-list-domains">X</p>added text in a list</div></td></tr><tr></tr> </tbody> <input type="button" value="+" class="btn-xs add-btn btn-circle" id="add-btn"> <input type="button" value="+" class="btn-xs add-btn btn-circle" id="add-btn"> <input type="button" value="+" class="btn-xs add-btn btn-circle" id="add-btn"> <input type="button" value="+" class="btn-xs add-btn btn-circle" id="add-btn"> <input type="button" value="+" class="btn-xs add-btn btn-circle" id="add-btn"> 

Answer 1

這是在將事件添加到Vanilla JS中的所有事件時，可以僅定位單擊按鈕的方式：

const btnEls = document.querySelectorAll('.add-btn')

Array.from(btnEls).forEach(btnEl => {
  btnEl.addEventListener('click', () => {
    // do whatever you want to button here (use btnEl var)
  })
})

Answer 2

您必須為每個按鈕分配不同的ID，但賦予相同的ID是錯誤的。

 $("tbody").on('click', '.list', function() { console.log($(this).find("tr")); var btn = $(this).data('id'); $('#'+btn).trigger('click'); $(this).remove(); }); $(".btn-xs").on('click', function(event) { var id = $(this).attr('id'); if($(this).hasClass('add-btn')) { $(this).removeClass('add-btn') .addClass('rm-btn') .val('-') .css('background','#cccccc'); $('tbody').append('<tr><td><div class="list" data-id='+id+'><span class="delete-list-domains">X</span> added text in a list by '+id+'</div></td></tr>'); } else if($(this).hasClass('rm-btn')) { $(this).removeClass('rm-btn') .addClass('add-btn') .val('+') .css('background','#fffff'); $('[data-id="'+id+'"]').remove(); } else { alert('error') } }); 

 .delete-list-domains{ color:red;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table> <tbody id="content"> </tbody> </table> <hr/> <input type="button" value="+" class="btn-xs add-btn btn-circle" id="add-btn1"> <input type="button" value="+" class="btn-xs add-btn btn-circle" id="add-btn2"> <input type="button" value="+" class="btn-xs add-btn btn-circle" id="add-btn3"> <input type="button" value="+" class="btn-xs add-btn btn-circle" id="add-btn4"> <input type="button" value="+" class="btn-xs add-btn btn-circle" id="add-btn5">