javascript - 点击li用li内容去替换背景色值,事件代理效果出不来什么情况?
阿神
阿神 2017-04-10 17:26:27
0
5
396
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <style>
*{list-style-type: none;}
#colcon li{ width: 50px; height: 50px; border:1px solid #ccc; float: left; margin:10px;line-height: 50px; background-color:#fcc;text-align: center;} 
</style>
<script>
window.onload=function (){
 var aUL=document.getElementById("colcon");
 var aLI=aUL.getElementsByTagName("li");
 aUL.onclick = function(ev){
     var ev = ev || window.event;
     var target = ev.target || ev.srcElement; 
    if(target.nodeName.toLowerCase == "li"){
        
        var newcolo = target.innerHTML;
        target.style.background = newcolo;
      };
     
   };
   
    }
</script>
</head>
<body>
<ul id="colcon">
  <li>#000</li>
  <li>#ccc</li>
  <li>#ddd</li>
</ul>
</body>
</html>
阿神
阿神

闭关修行中......

membalas semua(5)
小葫芦
if(target.nodeName.toLowerCase() == "li"

toLowerCase后边加括号

Peter_Zhu

这样就可以了,试着单步调试,用console.log()

window.onload=function (){
 var aUL=document.getElementById("colcon");
 var aLI=aUL.getElementsByTagName("li");
 aUL.onclick = function(ev){
     
     var ev = ev || window.event;
     var target = ev.target || ev.srcElement;
    
    if(target.nodeName.toLowerCase() == "li"){
        var newcolo = target.innerText;
        target.style.background = newcolo;
      };
     
   };
   
    }
Peter_Zhu

target.nodeName.toLowerCase()
改成这个就可以了

大家讲道理

楼上正解

小葫芦

toLowerCase(),你把后边的括号掉了。

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan