Question

这是我的代码这段代码中的资产是什么？并且：解释资产最佳位置描述可用于处理红绿灯序列的阵列结构。

编写一个脚本，使用所描述的数组生成一组交通信号灯的动画，以便每次点击按钮时灯光会以标准顺序发生变化

<!DOCTYPE html> <html>
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<head> 
<script>
i=1;
$(document).ready(function(){
    $("button").click(function(){

    if(i==1){   
    document.getElementById("tf1").setAttribute("fill", "transparent");
    document.getElementById("tf2") .setAttribute("fill", "yellow");
        i=2;
     }else if (i==2){
    document.getElementById("tf2").setAttribute("fill", "transparent");
    document.getElementById("tf3") .setAttribute("fill", "green");
    i=3;
      } else if(i==3) {
    document.getElementById("tf3").setAttribute("fill", "transparent");
    document.getElementById("tf1").setAttribute("fill", "red") ;
        i=1;
    }       

    });
});

</script>


<title>Traffic Light</title> 
</head>
<div  style="width:100px;height:360px;border:3px solid #000;"> 
<button>Change Lights</button> 
 <svg height="100" width="100"> 
 <circle id=tf1 cx="50" cy="50" r="40" stroke="black" stroke-width="2"fill="red"/></svg> 
 <svg height="100" width="100"> 
 <circle id="tf2" cx="50" cy="50" r="40" stroke="black" stroke-width="2"fill="transparent"/></svg> 
 <svg height="100" width="100"> 
 <circle id="tf3" cx="50" cy="50" r="40" stroke="black" stroke-width="2"fill="transparent"/></svg>  

</div>  
</body> 
</html>

我还需要写出每一行的详细注释，我已经做了最后一点我只需要帮助这一部分。任何人都可以帮我在deatil中注释这段代码吗？：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<head> 
<script>
i=1;
$(document).ready(function(){
    $("button").click(function(){

    if(i==1){   
    document.getElementById("tf1").setAttribute("fill", "transparent");
    document.getElementById("tf2") .setAttribute("fill", "yellow");
        i=2;
     }else if (i==2){
    document.getElementById("tf2").setAttribute("fill", "transparent");
    document.getElementById("tf3") .setAttribute("fill", "green");
    i=3;
      } else if(i==3) {
    document.getElementById("tf3").setAttribute("fill", "transparent");
    document.getElementById("tf1").setAttribute("fill", "red") ;
        i=1;
    }       

    });
});

</script>

帮助会很棒

Answer 1

您没有使用适当的方法来获取属性。使用 attr（）更改属性样式。

试试这个：

<div  style="width:100px;height:360px;border:3px solid #000;"> 
<button>Change Lights</button> 
 <svg height="100" width="100"> 
 <circle id=tf1 cx="50" cy="50" r="40" stroke="black" stroke-width="2"fill="red"/></svg> 
 <svg height="100" width="100"> 
 <circle id="tf2" cx="50" cy="50" r="40" stroke="black" stroke-width="2"fill="transparent"/></svg> 
 <svg height="100" width="100"> 
 <circle id="tf3" cx="50" cy="50" r="40" stroke="black" stroke-width="2"fill="transparent"/></svg>  

</div>

Jquery的：

i=1;
jQuery(document).ready(function(){
   jQuery("button").click(function(){

    if(i==1){   
    jQuery("#tf1").attr("fill", "transparent");
    jQuery("#tf2") .attr("fill", "yellow");
        i=2;
     }else if (i==2){
    jQuery("#tf2").attr("fill", "transparent");
   jQuery("#tf3") .attr("fill", "green");
    i=3;
      } else if(i==3) {
    jQuery("#tf3").attr("fill", "transparent");
    jQuery("#tf1").attr("fill", "red") ;
        i=1;
    }       

    });
});

以下是Jsfiddle代码链接：https://jsfiddle.net/dex0xpcL/

任何人都可以注释代码吗？

1 个答案: