javascript - 如何将上一个按钮添加到 jQuery 记录

Question

我有下面的代码，可以正常使用next button。现在我想添加上一个按钮以便能够查看以前的记录。这就是我所做的：

if(i > 0) {
  $('#prev_btn').html("<a data-role='button' href='#' id='next_btn'>Previous</a>");
}

如何实现上一个按钮？这是我的编码工作

var json = [{
  "firstName": "John",
  "lastName": "Doe"
}, {
  "firstName": "Anna",
  "lastName": "Smith"
}, {
  "firstName": "Peter",
  "lastName": "Jones"
}];

i = 0;
$(document).ready(function() {
  $('#next_btn').on('click', function() {
    $('#data').empty();
    if (i < json.length) {
      var firstname = json[i].firstName;
      var lastname = json[i].lastName;
      $('#data').append('<p>' + i + '- First Name: ' + firstname + ' - Last Name: ' + lastname + '</p>');
      i++;
      if (i > 0) {
        $('#prev_btn').html("<a data-role='button' href='#' id='next_btn'>Previous</a>");
      }
    } else {
      $('#data').append('<p><b>No more record!</b></p>');
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>My record</h1>
<div id="data"></div>
<a data-role="button" href="#" id="next_btn">Next</a>
<div id="prev_btn"></div>

标签： javascriptjquery

Answer 1

您可以使用,like将点击事件绑定到多个元素$('#next_btn, #prev_btn')。

在里面function你可以id使用clicked element和$(this).attr('id')基于next或prev按钮点击使用i++或i--。

根据我的意见，你可以show/hide previous，next按钮。而不是改变html。

其余代码是不言自明的。如果仍有任何困惑，请留下评论。

在下面试试。

var json = [{
  "firstName": "John",
  "lastName": "Doe"
}, {
  "firstName": "Anna",
  "lastName": "Smith"
}, {
  "firstName": "Peter",
  "lastName": "Jones"
}];

let i = -1;

$(document).ready(function() {
  $('#next_btn, #prev_btn').on('click', function() {
    $('#data').empty();
    $(this).attr('id') == 'next_btn' ? i++ : i--;

    if (i >= json.length) {
      $('#data').append('<p><b>No more record!</b></p>');
      $('#next_btn').hide();
    } else if (i < 0) {
      $('#data').append('<p><b>First record!</b></p>');
      $('#prev_btn').hide();
    } else {
      var firstname = json[i].firstName;
      var lastname = json[i].lastName;
      $('#data').append('<p>' + i + '- First Name: ' + firstname + ' - Last Name: ' + lastname + '</p>');
      $('#prev_btn, #next_btn').show();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>My record</h1>
<div id="data"></div>
<a data-role="button" href="#" id="next_btn">Next</a>
<div id="prev_btn" style="display:none;"><a data-role='button' href='#'>Previous</a></div>