jq实现新闻列表上一页下一页及详情页

一.html

     <ul class="new-list">
  
  </ul>
  <div class="btns">
    <button class="prev">上一页</button>
    <button class="next">下一页</button>
  </div>

二.css

 *{
  padding:0;
  margin:0;
  list-style:none;
}
a{
  text-decoration: none;
}
.clearfix::after{
  content: "";
  clear: both;
  display: block;
  width:0;
  height: 0;
}
.new-list,.btns{
  width:500px;
  margin:50px auto;
}
.new-list li{
  border-bottom: 1px solid gainsboro;
  padding:20px 0;
}
.new-list li:last-child{
  border-bottom:none;
}
.new-list li img{
  float: left;
  width: 100px;
  margin-right: 10px;
} 
.news-dec p{
  color:gainsboro;
}
i{
  color: red;
}

三.script

      var pageNums=1;
getList(pageNums)
// 点击下一页
$(".next").click(function(){
    pageNums++
  getList(pageNums)
})

// 点击上一页
$(".prev").click(function(){
  if(pageNums===1){
    alert("已经是首页了")
  }
    pageNums--
  getList(pageNums)
})
// 函数封装
function getList(pageNums){ 
$.ajax({
  url:"https://api.apiopen.top/getJoke",
  method:"POST",
  data:{
    page:pageNums,
    count:5,
  },
  success:function(res){
    console.log(res);
    if(res.code===200){
      $(".new-list").html("")
      for(var i=0;i<res.result.length;i++){
        var item=res.result[i]
        var str='<li class="clearfix">'+
      '<img src="'+item.thumbnail+'" alt="断网了">'+
      '<div class="news-dec">'+
       ' <a target="_blank"  href="./详情.html?id='+item.sid+'"><h3>'+item.text +'</h3></a>'+
       ' <p>'+item.passtime+'</p>'+
       '<i>类型：'+item.type +'</i>'+
     ' </div>'+
   ' </li>'
    $(".new-list").append(str)
      }
    }else{
      alert(res.massage)
    }
  }
})
}