先放完整代码
<!DOCTYPE html><html><head><meta charset="utf-8"><title>测试</title><script src="/jquery/2.0.0/jquery.js"></script><style type="text/css">#a{width:50px;height:50px;background: rgb(54, 54, 54);}#b{width:50px;height:50px;background: rgb(144, 243, 182);}#d{width:50px;height:50px;background: rgb(114, 116, 231);}li{list-style: none;}.display{display:block;}.hide{display:none;}</style></head><body><div id="a"></div><div id="b"></div><div id="d"></div><div id="c"><ul><li id="c1">11111111</li><li id="c2">22222222</li><li id="c3">33333333</li></ul></div><script type="text/javascript">var link = $('ul li');var leng = c.querySelectorAll("li").length;$("#a").on('click',function(){for(var i=0 ; i< leng;i++){link[i].className = 'display'}})$("#b").on('click',function(){for(var i=0 ; i< leng;i++){if(link[i].id !== 'c2'){link[i].className = 'hide'}else{link[i].className = 'display'}}})$("#d").on('click',function(){for(var i=0 ; i< leng;i++){if(link[i].id !== 'c1'){link[i].className = 'hide'}else{link[i].className = 'display'}}}) </script></body></html>
一开始点击事件这样写的,发现点击无效,支持给动态元素和属性绑定事件的是live和on,其中live在JQUERY 1.7之后就不推荐使用了。现在主要用on,使用on的时候也要注意,on前面的元素也必须在页面加载的时候就存在于dom里面。动态的元素或者样式等,可以放在on的第二个参数里面。
$('#a').click = function(){for(var i=0 ; i< leng;i++){link[i].className = 'display'}}
后来将代码改为下面代码就好了
$("#a").on('click',function(){for(var i=0 ; i< leng;i++){link[i].className = 'display'}})