2016-05-26 6 views
-1

これは私のコードです このコードの資産は何ですか? トラフィックライトシーケンスを処理するために使用できる配列の構造を記述します。誰でもコードに注釈を付けることができますか?

配列を使用するスクリプトを書くには、ライトは私も書く必要があり、標準的な順序でボタンが

<!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のコードのちょうどこのビットに注釈を付けることができます?:あなたは属性のために適切な方法を使用していない

+2

。 –

+0

なぜ正確に助けが必要ですか?あなたが理解できないことはありますか? (代わりにそれを尋ねる(あなたがそれを理解しなければ、コードをどのように書いたのか))。それともあなたのためにあまりにも多くの文章ですか? (それはSOのためではありません)。 –

答えて

-2

<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> 

ヘルプは素晴らしいものです。 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/のStackOverflowが何のためにあるのかない

+0

OPは、jQueryを使用するコードのバージョンではなく、アノテーションを書くことを求めています。また、_ "あなたは属性に適切なメソッドを使用していません" - コードがDOMメソッド['setAttribute']を使用しています(https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute )彼らは正しく使用していました:https://jsfiddle.net/jLvfxdm4/ –

+0

ありがとう、私はそれを正しく使用していないことを知っています、私はそれを残して、すべての行がコードを詳細に示します。 – luly

関連する問題