关于javascript变量作用域问题

weixin_40980353 2018-05-26 01:34:31
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>

</head>
<body>
<table id="cartTable">
<thead>
<tr>
<th><label><input class="check-all check" type="checkbox">  全选</label></th>
<th>商品</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td class="checkbox"><input class="check-one check" type="checkbox"></td>
<td class="goods"><img src="风景图片/1.jpg" alt=""/><span>Casio/卡西欧 EX-TR350</span></td>
<td class="price">5999.88</td>
<td class="count">
<span class="reduce"> </span>
<input class="count-input" type="text" value="1"/>
<span class="add">+</span>
</td>
<td class="subtotal">5999.88</td>
<td class="operation"><span class="delete">删除</span></td>
</tr>
<tr>
<td class="checkbox"><input class="check-one check" type="checkbox"></td>
<td class="goods"><img src="风景图片/2.jpg" alt=""/><span>Casio/卡西欧 EX-TR350</span></td>
<td class="price">5999.88</td>
<td class="count">
<span class="reduce"> </span>
<input class="count-input" type="text" value="1"/>
<span class="add">+</span>
</td>
<td class="subtotal">5999.88</td>
<td class="operation"><span class="delete">删除</span></td>
</tr>
<tr>
<td class="checkbox"><input class="check-one check" type="checkbox"></td>
<td class="goods"><img src="风景图片/3.jpg" alt=""/><span>Casio/卡西欧 EX-TR350</span></td>
<td class="price">5999.88</td>
<td class="count">
<span class="reduce"> </span>
<input class="count-input" type="text" value="1"/>
<span class="add">+</span>
</td>
<td class="subtotal">5999.88</td>
<td class="operation"><span class="delete">删除</span></td>
</tr>
<tr>
<td class="checkbox"><input class="check-one check" type="checkbox"></td>
<td class="goods"><img src="风景图片/4.jpg" alt=""/><span>Casio/卡西欧 EX-TR350</span></td>
<td class="price">5999.88</td>
<td class="count">
<span class="reduce"> </span>
<input class="count-input" type="text" value="1"/>
<span class="add">+</span>
</td>
<td class="subtotal">5999.88</td>
<td class="operation"><span class="delete">删除</span></td>
</tr>

</tbody>
</table>
<div class="foot" id="foot">
<label class="fl select-all"><input type="checkbox" class="check-all check"> 全选</label>
<a class="fl delete" id="deleteAll" href="javascrpt:;">删除</a>
<div class="fr closing">结算</div>
<div class="fr total">合计: ¥<span id="priceTotal">0.00</span></div>
<div class="fr selected"><a id="selected">已选商品</a>
<span id="selectedTotal">0</span>件
<span class="arrow up">∧</span>
<span class="arrow down">∨</span>
</div>
<div class="selected-view">
<div id="selectedViewList" class="clearfix">
<!--<div><img src="风景图片/5.jpg"><span>取消选择</span></div>-->
</div>
<span class="arrow">.<span>.</span></span>
</div>
</div>
<script>
window.onload = function (ev) {
if (!document.getElementsByClassName) {
document.getElementsByClassName = function (classNames) {
var ret = [];
var els = document.getElementsByTagName("*");
for (var i = 0, len = els.length; i < len; i++) {
if (els[i.className === classNames]
|| els[i].className.indexOf(classNames + " ") >= 0
|| els[i].className.indexOf(" " + classNames) >= 0
|| els[i].className.indexOf(" " + classNames + " ") >= 0) {
ret.push(els[i]);
}
}
return ret;
}
}

var cartTable = document.getElementById("cartTable");
var checkInputs = document.getElementsByClassName("check"); //取得所有选择框
var checkAllInputs = document.getElementsByClassName("check-all"); //取得全选框
var tr = cartTable.children[1].rows; //存放节点下所有的tr元素

var selectedTotal = document.getElementById("selectedTotal"); //取得商品件数
var priceTotal = document.getElementById("priceTotal"); //取得选中总计价格
var selectedViewList=document.getElementById("selectedViewList");

//小计
function getSubTotal(tr) {
var tds=tr.cells;
var price=parseFloat(tds[2].innerHTML);
var count=parseInt(tr.getElementsByTagName("input")[1].value);
var SubTotal=parseFloat(price * count);
tds[4].innerHTML=SubTotal;
}




var selectedViewList=document.getElementById("selectedViewList");
var tr = cartTable.children[1].rows; //存放节点下所有的tr元素

selectedViewList.onclick=function (e) {

e=e||window.event; //IE兼容配置
var el=e.srcElement;
if (el.className=="del"){
var index=el.getAttribute("index");
var input =tr[index].getElementsByTagName("input")[0];
input.checked=false;
input.onclick();
}
}

//小计
function getSubTotal(tr) {
var tds=tr.cells;
var price=parseFloat(tds[2].innerHTML);
var count=parseInt(tr.getElementsByTagName("input")[1].value);
var SubTotal=parseFloat(price * count);
tds[4].innerHTML=SubTotal;
}

//计算
function getTotal() {
var seleted = 0; //总数
var price = 0; //价格
var HTMLstr='';
for (var i = 0, len = tr.length; i < len; i++) {
if (tr[i].getElementsByTagName("input")[0].checked) {
tr[i].className = 'on';
seleted += parseInt(tr[i].getElementsByTagName("input")[1].value);//parseInt转化为数字
price += parseFloat(tr[i].cells[4].innerHTML); //cells 取得表格所有td
HTMLstr+='<div><img src="'+tr[i].getElementsByTagName('img')[0].src+'"><span class="del" index="'+i+'">取消选择</span></div>'

} else {
tr[i].className = "";
}
}
selectedTotal.innerHTML = seleted.toFixed(0);
priceTotal.innerHTML = price.toFixed(2);//保留两位小数
selectedViewList.innerHTML=HTMLstr;

if (seleted==0){
foot.className="foot";
}
}


for (var i = 0, len = checkInputs.length; i < len; i++) {
checkInputs[i].onclick = function () {
if (this.className === "check-all check") {
for (var j = 0; j < checkInputs.length; j++) { //遍历所有选择框
checkInputs[j].checked = this.checked; //把选择框的状态与全选框保持一致
}
}
if (this.checked == false) {
for (var k = 0; k < checkAllInputs.length; k++) { //遍历所有选择框
checkAllInputs[k].checked = false; //如果有一个未选 那么将所有全选框改编成未选状态
}
}
getTotal();
}
} //给各个选择框绑定点击事件
var selected = document.getElementById("selected");
var foot = document.getElementById("foot");

selected.onclick = function () {
if (foot.className == "foot") {
if (selectedTotal.innerHTML != 0){
foot.className = "foot show";
}
}
else {
foot.className = "foot";
}
}
};


for (var i=0;i<tr.length;i++){
tr[i].onclick=function (e) { //访问不到
e=e||window.event;
var el=e.srcElement;
var cls=el.className;
var input=this.getElementsByTagName("input")[1];
var val=parseInt(input.value);
var reduce=this.getElementsByTagName("span")[1];
switch (cls){
case"add":
input.value=val+1;
reduce.innerHTML="-";
getSubTotal(this); //访问不到
break;
case"reduce":
if (val>1){
input.value=val-1;
getSubTotal(this); //访问不到
} if (input.value<=1){
reduce.innerHTML=" ";
}

break;
default:
break;
}
}
getTotal();
}
</script>
</body>
</html>
541行的tr 552,557 的全局函数,怎么都访问不到
谁能解释一下这个作用域的问题,以及怎么改进代码书写能防止这样的问题发生
...全文
869 2 打赏 收藏 转发到动态 举报
写回复
用AI写文章
2 条回复
切换为时间正序
请发表友善的回复…
发表回复
天际的海浪 2018-05-26
  • 打赏
  • 举报
回复
你的tr是 window.onload = function (ev) {} 事件函数内的局部变量,最后的for循环却在window.onload事件函数外面当然访问不到了。 你把for循环放到window.onload事件函数里面就好了
weixin_40980353 2018-05-26
  • 打赏
  • 举报
回复
<style> * { margin: 0; padding: 0; list-style-type: none; } a { color: #666; text-decoration: none; } table{ border-collapse: collapse; border-spacing: 0; /*/应该是为了统一样式*/ border:0; /*/应该是为了统一样式*/ text-align: center; width: 937px; margin: auto auto; margin-top: 60px; } body { color: #666; font: 12px/180% Arial, Helvetica, sans-serif, "新宋体"; } clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden } .clearfix { display: inline-table } * html .clearfix { height: 1% } .clearfix { display: block } * + html .clearfix { min-height: 1% } .fl { float: left; } .fr { float: right; } .catbox { width: 940px; margin: 100px auto; } .catbox table { text-align: center; width: 100%; } #cartTable th, #cartTable td { border: 1px solid #CADEFF; } #cartTable th { background: #e2f2ff; border-top: 3px solid #a7cbff; height: 30px; } #cartTable td { padding: 10px; color: #444; } #cartTable tbody tr:hover { background: RGB(238, 246, 255); } .checkbox { width: 60px; } .check-all { vertical-align: middle; } .goods { width: 300px; } .goods span { width: 180px; margin-top: 20px; text-align: left; float: left; } .goods img { width: 100px; height: 80px; margin-right: 10px; float: left; } .price { width: 130px; } .count { width: 90px; } .count .add, .count input, .count .reduce { float: left; margin-right: -1px; position: relative; z-index: 0; } .count .add, .count .reduce { height: 23px; width: 17px; border: 1px solid #e5e5e5; background: #f0f0f0; text-align: center; line-height: 23px; color: #444; } .count .add:hover, .count .reduce:hover { color: #f50; z-index: 3; border-color: #f60; cursor: pointer; } .count input { width: 50px; height: 15px; line-height: 15px; border: 1px solid #aaa; color: #343434; text-align: center; padding: 4px 0; background-color: #fff; z-index: 2; } .subtotal { width: 150px; color: red; font-weight: bold; } .operation span:hover, a:hover { cursor: pointer; color: red; text-decoration: underline; } .foot{ width: 935px; margin-top: 10px; color: #666666; height: 48px; border: 1px solid #c8c8c8; background-color: #eaeaea; background-image: linear-gradient(RGB(241,241,241),RGB(226,226,226)); position: relative; z-index:8; margin: auto auto; } .foot div, .foot a { line-height: 48px; height: 48px; } .foot .select-all { width: 80px; height: 48px; line-height: 48px; color: #666; text-align: center; } .foot .delete { padding-left: 10px; } .foot .closing { border-left: 1px solid #c8c8c8; width: 103px; text-align: center; color: #666; font-weight: bold; cursor: pointer; background-image: linear-gradient(RGB(241, 241, 241), RGB(226, 226, 226)); } .foot .closing:hover { background-image: linear-gradient(RGB(226, 226, 226), RGB(241, 241, 241)); color: #333; } .foot .total { margin: 0 20px; cursor: pointer; } .foot #priceTotal, .foot #selectedTotal { color: red; font-family: "Microsoft Yahei"; font-weight: bold; } .foot .selected { cursor: pointer; } .foot .selected .arrow { position: relative; top: -3px; margin-left: 3px; } .foot .selected .down { position: relative; top: 3px; display: none; } .show .selected .down { display: inline; } .show .selected .up { display: none; } .foot .selected:hover .arrow { color: red; } .foot .selected-view { width: 938px; border: 1px solid #c8c8c8; position: absolute; height: auto; background: #ffffff; z-index: 9; bottom: 48px; left: -1px; display: none; } .show .selected-view { display: block; } .foot .selected-view div { height: auto; } .foot .selected-view .arrow { font-size: 16px; line-height: 100%; color: #c8c8c8; position: absolute; right: 330px; bottom: -9px; } .foot .selected-view .arrow span { color: #ffffff; position: absolute; left: 0px; bottom: 1px; } #selectedViewList { padding: 10px 20px 10px 20px; } #selectedViewList div { display: inline-block; position: relative; width: 100px; height: 80px; border: 1px solid #ccc; margin: 10px; float: left; } #selectedViewList div img { width: 100px; height: 80px; margin-right: 10px; float: left; } #selectedViewList div span { display: none; color: #ffffff; font-size: 12px; position: absolute; top: 0px; right: 0px; width: 60px; height: 18px; line-height: 18px; text-align: center; background: #000; cursor: pointer; } #selectedViewList div:hover span { display: block; } .on{ background-color: #e2f2ff; } </style> 这是css

87,838

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧