使用Jquery实现简单的页码变化

篆愁君的烦恼

已于 2023-02-20 13:58:00 修改

阅读量1k

点赞数

分类专栏：前端jqery 文章标签： html jquery 前端

于 2022-04-12 20:38:18 首次发布

本文链接：https://blog.csdn.net/m0_52228992/article/details/124133404

版权

前端jqery 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

通过jquery实现页码的加减，到达最小或最大后不再变化。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="../js/jquery-1.12.4.js" type="text/javascript"></script>
<script>
 $(function () {
   $("button").click(function () {
     let n = $(this).text();
     // console.log(n);
     if (n == "《") {
       if ($("button:eq(1)").text() == "1" && $("button:eq(5)").text() != "100") {
//这个100可以转化为变量从而控制页数
       } else {
         $("button:gt(0):lt(5)").each(function () {
           let a = $(this).text();
           // console.log(a);
           let b =Number(a)-1;
           // console.log(b);
           $(this).text(b);
           // console.log($(this).text());
         })
       }
     }
     if (n == "》") {
       if ($("button:eq(1)").text() != "1" && $("button:eq(5)").text() == "100") {
       } else {
         $("button:gt(0):lt(5)").each(function () {
           let a = $(this).text();
           // console.log(a);
           let b =Number(a)+1;
           // console.log(b);
           $(this).text(b);
           // console.log($(this).text());
         })
       }
     }
   })
 })
</script>
<button>《</button>
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<button>》</button>
</body>
</html>

运行结果：

点击最右边按钮：

注：需下载jQuery文件或者直接使用网上链接jQuery文件，才可运行文件

篆愁君的烦恼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
使用Jquery实现简单的页码变化

通过jquery实现页码的加减，到达最小或最大后不再变化。代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><script src="../js/jquery-1.12.4.js" type="text/javascript"&g
复制链接

扫一扫