javascript - 按钮更改 jquery javascript

Question

如果我点击“添加保留按钮”，有没有办法将我的按钮更改为“删除”就像当我单击添加按钮时，它将加载数据，然后它将更改为删除按钮，因为它已经添加了。如果我按下删除按钮，它如何返回到“添加到您的住宿”按钮？这是我的js代码和我的按钮代码

$(document).ready(function() {
  $(".addons").on("click", function(event) {
    event.preventDefault();
    var id = $(this).data('addon-id');
    console.log(id);

    if (id != '') {
      $.ajax({
        type: "POST",
        url: "Pages/addonajax",
        data: {
          id: id
        },
        success: function(data) {
          console.dir(data);
          if (data) {
            result = JSON.parse(data);
            $("#test4>span").html(result[0]['name']);
            $("#test5>span").html(result[0]['price']);
            $("#test2>span").append(result[0]['price']);
          } else {
            $('#test1').append('no records found');
          }
        }
      });
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3 class="bookingroom">Total: PHP 2,750.00</h3>
<h5 class="addon-taxes2">Including Taxes & Fees</h5>
<button class="addons addon-btn trans_200">ADD TO MY STAY</button>

这是 fiddle 的示例 https://jsfiddle.net/j501fwb8/1/

Answer 1

维护一个必须根据某些标准执行多项操作的元素要困难得多。相反，我强烈建议使用多个元素 Single Responsibility .

我还强烈推荐阅读 Decoupling Your HTML, CSS, and JavaScript - Philip Walton (Engineer @ Google)

我的例子是这样的:

$(document).ready(function() {
  $('.js-btn-addon').on('click', function() {
    var $this = $(this);
    /// do whatever
    var addonId = $this.data('addon-id');
    $this.addClass('is-hidden');
    $('.js-btn-remove[data-addon-id="' + addonId + '"]').removeClass('is-hidden');
  });
  $('.js-btn-remove').on('click', function() {
    var $this = $(this);
    /// do whatever
    var addonId = $this.data('addon-id');
    $this.addClass('is-hidden');
    $('.js-btn-addon[data-addon-id="' + addonId + '"]').removeClass('is-hidden');
  });
});

.is-hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="addons addon-btn js-btn-addon trans_200" data-addon-id = "1">ADD TO MY STAY</button>
<button class="addons addon-btn js-btn-remove is-hidden trans_200" data-addon-id = "1">Remove</button>
<br/>

<button class="addons addon-btn js-btn-addon trans_200" data-addon-id = "2">ADD TO MY STAY</button>
<button class="addons addon-btn js-btn-remove is-hidden trans_200" data-addon-id = "2">Remove</button>
<br/>

<button class="addons addon-btn js-btn-addon trans_200" data-addon-id = "3">ADD TO MY STAY</button>
<button class="addons addon-btn js-btn-remove is-hidden trans_200" data-addon-id = "3">Remove</button>
<br/>