Question

当我点击.add-btn时，我将.add-btn的样式更改为背景：#cccccc并将val（）更改为＆＃34; - ＆＃34;。

现在，当我删除添加的文本时，tr td .list是列表中的一行，我想要添加已删除的行的.add-btn按钮，将样式添加回背景：＃232323 with val（）＆＃ 34 +＃34;

我遇到的问题是有10个带有classname .add-btn的按钮，我现在将如何点击10个按钮中的哪一个添加文字？

＆＃13;

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

＆＃13;

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

＆＃13;

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

单击button1并将文本添加到div，单击button2并删除文本和CSS样式button1

2 个答案: