在js中获取页面元素的属性值时,弱类型导致的诡异事件踩坑记录,
前几天写一个js的时候遇到一个非常诡异的事情,这个问题是这样的,我要获取一个页面的DOM元素的val值,判断这个值是否比某个变量大,这个需求原先数字最大也就是10,现在要改了,可能会更多,这个时候我发现比较大小的判断就出了问题:
代码粘出来:
// js弱类型导致的诡异现象,11 > 9 false
function downtest(id){// 现象是当val取到的元素val值是11的时候,11>9结果是false
// 当前点击下一题的是第几题,
var val=$("#"+id).attr("val");
var valint = parseInt(val);// 如果不把这个变量手动转成数字,当val大于等于10的时候(小于10的时候当做是数字)js就会把它作为一个字符串处理,弱类型语言导致的
// 如果当前这个题号比已答题数大的话,就让已答数量变成当前题号
console.log('valint: '+valint+'num: '+num+(valint>num));
console.log(valint+num);
if (valint>num) {
document.getElementById("numbers").innerText=valint;
num=valint;
}else{
document.getElementById("numbers").innerText=num;
}
var div = $("#"+id);
var n = div.next(); //后一个兄弟
div.hide();
n.show();
a++
}
当获取到的这个值为11的时候(第四行),被比较的变量是9,按理说11>9的结果应该是true吧,但是打印出来的log显示是false.....我后来查了查资料,自己总结一下,发现如果当获取到的属性值超过或等于10,js就会把这个变量视为字符串处理,而不是在比较时作为数字,
解决的办法就是手动转换为数字(第五行),这个时候再打印出来就是正确的数字对比结果了,比较小的一个小坑吧,记录一下
在js中获取页面元素的属性值时,弱类型导致的诡异事件踩坑记录,的更多相关文章
- js中获取页面元素节点的几种方式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- jQuery 获取页面元素的属性值
获取浏览器显示区域(可视区域)的高度 : $(window).height(); 获取浏览器显示区域(可视区域)的宽度 : $(window).width(); 获取页面的文档高度 ...
- 示例 - 10行代码在C#中获取页面元素布局信息
最近研究一个如何在网页定位验证码并截图的问题时, 用SS写了一段C#小脚本可以轻松获取页面任意元素的布局信息 (top, left, width, height). 10行功能代码, 觉得有点用, 现 ...
- 第二十课:js中如何操作元素的属性系统
本章的内容有点复杂,我将用简单的方式来介绍重要的东西,不重要的东西,这里就不讲了,讲了也毛用. 通常我们把对象的非函数成员叫做属性.对元素节点来说,其属性大题分为两大类,固有属性和自定义属性.固有属性 ...
- JS中获取页面单选框radio和复选框checkbox中当前选中的值
单选框:单选框的name值全部相同 页面有一组单选框的元素<td><input type="radio name="radioid">满意< ...
- 关于JS中获取浏览器高度和宽度值的多种方法(多浏览器)
三种浏览器获取值方法 IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 ...
- Vue获取DOM元素的属性值
项目中需要做一个小弹层,如下图: 我需要知道点击元素距离顶部的值,再计算弹层的top值,如下图: 在vue中如何获取到DOM元素距离窗口顶部的值呢? 1.通过$event获取 html: <di ...
- Js中获取对象的所有key值
假如现在有一个对象 var obj = { A:2 ,B:"Ray" ,C:true ,D:function(){} } 如果想遍历对象obj中的所有键值,一般是用以下方式 for ...
- js中改变不同的div属性值的操作
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- 阿里,百度,腾讯招聘 Java 程序员的技术标准
阿里巴巴篇 扎实的计算机专业基础,包括算法和数据结构,操作系统,计算机网络,计算机体系结构,数据库等 具有扎实的Java编程基础,理解IO.多线程等基础框架 熟练使用Linux系统的常用命令及shel ...
- spring单元测试报错:Failed to load ApplicationContext 的解决方法
使用idea 配置单元测试之后,配置完spring的注解@junit 和@runer 之后 一直报错. 最后发现是默认使用jdk1.8引起的,使用jdk1.7即可.
- 数据预处理(Python scikit-learn)
在机器学习任务中,经常会对数据进行预处理.如尺度变换,标准化,二值化,正规化.至于采用哪种方法更有效,则与数据分布和采用算法有关.不同算法对数据的假设不同,可能需要不同的变换,而且有时无需进行变换,也 ...
- 从golang-gin-realworld-example-app项目学写httpapi (八)
https://github.com/gothinkster/golang-gin-realworld-example-app/blob/master/common/unit_test.go 单元测试 ...
- 如何提高Ajax性能
1.适当使用缓存机制 2.使用CDN内容分发来访问Jquery脚本: (1)自己公司架设CDN服务器 (2)使用第三方公司的,比如微软,谷歌等公司的CDN,但有时候不太靠谱 3.JS/CSS文件的打包 ...
- Java学习---Excel读写操作
1.1.1. 简介 Apache POI 使用Apache POI 完成Excel读写操作 Apache POI 是用Java编写的免费开源的跨平台的 Java API,Apache POI提供API ...
- Homebrew 安装 MySQL
安装 Homebrew brew doctor 确认 brew 在正常工作 brew update 更新包 brew install mysql 安装 MySQL ==> Downloadi ...
- win7装postgresql10.4
第一步: 第二步: 第三步: 第四步: 第五步: 下载地址:https://get.enterprisedb.com/postgresql/postgresql-10.4-1-windows-x64. ...
- 简析Chrome和Webkit的渊源
http://www.3lian.com/edu/2012/05-25/28803.html 互联网的浪潮从未停息,而用以网上冲浪的冲浪板也一直在变得愈加精良.自人们进入互联网时代以来,即已经发生了三 ...
- 3504. [CQOI2014]危桥【最大流】
Description Alice和Bob居住在一个由N座岛屿组成的国家,岛屿被编号为0到N-1.某些岛屿之间有桥相连,桥上的道路是双 向的,但一次只能供一人通行.其中一些桥由于年久失修成为危桥,最多 ...