Question

我有一个按钮，当按下该按钮时，该按钮应该将下一个俱乐部带到DOM，而无需刷新。它只适用于下一个俱乐部，但此后将不再起作用。我需要以某种方式更改按钮上的俱乐部ID，以允许api获取下一个俱乐部的信息。我不确定做到这一点的最佳方法是什么。有什么想法吗？

 <div class="container-fluid">
  <h1>Your Club</h1>
  <br>
    <div id="club-info">
    <h2 class="club-name"><%= @club.name %></h2>
    <br>
    <h2 class="club-brand"><%= @club.brand %></h2>
    </div>
  <br>
  <button class="next-club" data-id="<%= @club.id %>">Next Club</button>
  <br>
  <br>
  <%= link_to "See all of your clubs", club_path %>
</div>

<script type="text/javascript" charset="utf-8">
  $(function() {
    $('.next-club').click(function() {
      var id = $(this).data("id");
      $('#club-info').html('')
      $.get('/clubs/' + id + '/next', function(data, status) {
        $('#club-info').append(`<h2>${data.name}</h2>` + 
          `<br>` + 
          `<h2>${data.brand}</h2>`);
      })
    }) 
  });
</script>

Answer 1

成功获取请求后，您可以添加

$('.next-club').data('id', data.id);

以上将使用Jquery .data更改发送的ID。（https://api.jquery.com/data/）

Answer 2

成功后，您需要为按钮分配新的ID，并确保动态更新该按钮的数据属性。

检查$that.data部分，在其中分配新的数据ID。如果使用friendly-id来制作。

$(document).on('click', '.next-club', function(e) {
   e.preventDefault();
   var id = $(this).data("id");
   var $that = $(this);         

   $.get('/clubs/' + id + '/next', function(data, status) {
        if(status == 'success'){
            $('#club-info').html('')
            $('#club-info').append(`<h2>${data.name}</h2>` + 
                   `<br>` + 
                   `<h2>${data.brand}</h2>`);
            $that.data('id', data.id); #assign new id
        }
   })
}

使用“ jQuery下一个”按钮调出下一个俱乐部

2 个答案: