今天同事找我求助,在写一个分页功能时遇到了问题,输入页数跳转页面时,输入内容大于总页数时也会跳转。
他将总页数与 input 输入的数字进行对比,比如总页数时 6 ,输入 7 是正常提示“超出最大页数”,输入 50 却会跳转成功。
HTML:
第5页
共6页
跳转
jQuery:$("#skip").click(function () {
var pages = $("#page").html();
var inpPage = $("#inp-page").val();
if(inpPage > pages){
alert("超出最大页数");
}else{
alert("跳转成功");
}
})
输入数字 7 ,会弹出“超出最大页数”,输入 50 却会提示“跳转成功”。
原因:
原来获取到的是字符串 string ,并不是数字 Number ,所以比较大小是按照字符串的方式进行的。
字符串大小比较的规则:
比较的时候,从字符串左边开始,依次比较每个字符,直接出现差异、或者其中一个串结束为止。
比如 ABC 与 ACDE 比较,第一个字符相同,继续比较第二个字符,由于第二个字符是后面一个串大,所以不再继续比较,结果就是后面个串大。
再如 ABC 与 ABC123 比较,比较三个字符后第一个串结束,所以就是后面一个串大。
所以,长度不能直接决定大小,字符串的大小是由左边开始最前面的字符决定的。
JS 输出数据类型:
语法:typeof object,打印数据类型代码如下:console.log(pages); // string
所以我们刚刚比较的是字符串,上面的问题就好理解了,应该把 字符串 转换为数字类型,在进行比较。
将数据类型转换为字符串:
语法:Number(object) ,代码如下:Number(pages);
代码改为如下,就可以正常比较了:if( Number(inpPage) > Number(pages)){
alert("超出最大页数");
}else{
alert("跳转成功");
}
JavaScript 类型转换:
String() 将数字转换为字符串。
Date() 将日期转换为字符串。
Number() 将字符串转换为数字。