js 变量作用域,该如何处理

js 变量作用域
code--js
var div1 = "";
$("#div1").click(function(){
div1="div2";
alert("i am div1");
});
$("#"+div1).click(function(){
alert("i am div2");
});
code--html
<div style="background-color: red; width: 50px;height:50px" id="div1"></div>
<div style="background-color: green; width: 50px;height:50px" id="div2"></div>
问题：
1.为什么第二个click没有执行？
div1的值没有变
2.为什么div1的值不变？
待解决...
[解决办法]

 var div1 = "";
        $("#div1").click(function () {
            div1 = "div2";
            alert("i am div1");
            $("#" + div1).click(function () {
                alert("i am div2");
            });

        });

[解决办法]
JS的执行顺序问题。
$("#div1").click(function(){})这是在绑定点击事件，并不执行里面的函数。事件绑定是一次性的，只执行一次，所以初始的时候，这段JS给$("#div")和$("#")这两个对象绑定事件，当然第二个所要查找的DOM对象是不存在的。
而后在页面里面点击div1，触发点击事件而执行上一步绑定的处理函数，此时div1的值变为'div2'，但是事件绑定工作在第一步已经完成了，不会再去执行后面$("#"+div1).click(function(){})，所以#div2就没有绑定到处理函数。
这是两个时序的操作，不要弄混了。
可以按照以上各位给出的写法，动态的绑定事件，在div1值改变的时候才绑定事件。

查看更多 下一篇