2016-11-16 11 views
0

私はプロジェクト "スマートハウス"を持っていて、Arduino Megaをイーサネットシールドで使用しています。私の問題はarduinoからGUIウェブサイトにデータを接続することです(私はJSの初心者です)。 ボタンを押すと、データがArduinoに送信され、ボタンの色が赤から緑(点灯)に変わります - >これは問題ありません。私はドアを開けた場合ArduinoとJS/Cpp

その後、私が赤から緑に色の変化をDIVしたいと私は

これはArduinoのコードがどのように...知らない:私のウェブサイトの文字列で

int count;     // used by 'for' loops 
int sw_arr[] = {30,31,32,33,34,35}; // pins interfaced to switches 

for (count = 0; count < 5; count++) { 
    cl.print("<switch>"); 
    if (digitalRead(sw_arr[count])) {; 
     cl.print("OFF"); 
    } 
    else { 
     cl.print("ON"); 
    } 
    cl.println("</switch>"); 
} 

OFFからONに変わりますが、私は色の変化を背景にしたいと思います。私は自分の問題がJavascriptだと思っています。

これはチュートリアルからorginalコードです:

var count; 
var num_an = this.responseXML.getElementsByTagName('switch').length; 

     for (count = 0; count < num_an; count++) { 
      document.getElementsByClassName("doors")[count].innerHTML = 
      this.responseXML.getElementsByTagName('switch')[count].childNodes[0].nodeValue; 
     } 

私はこのコードを変更するが、それでも動作しない:

var count; 
var num_an = this.responseXML.getElementsByTagName('switch').length; 

for (count = 0; count < num_an; count++) { 

if(this.responseXML.getElementsByTagName('switch')[count].childNodes[0].nodeValue === "ON") { 
       $('.doors').css('background', '#989898'); 
      } 
     else { 
       $('.doors').css('background', '#FA6900'); 
      } 

     } 

HTMLコード:私は必要

<div class="item-door light-red doors"> 
     <div id = "door"> 
      <i class="fa fa-key"></i> 
       <p>Door</p> 
     </div> 
</div> 

ので要約、文字列のON/OFFではなく、DIVの背景色を赤から緑に変更します。

誰かが時間を持っていて、私を助けてくれたら、とても感謝しています!

答えて

0

コード$('.doors').css('background', '#989898');は、クラス「ドア」を含むすべてのコンテナの背景を変更します。あなたの声明では、最後の反復が#FA6900の背景を変更した場合、すべてのdivは#FA6900の色になります。

一つだけのコンテナを変更したい場合は、記述する必要があります:2時間$()

$($(".doors").get(count)).css('background', '#989898') .`

があるので.get()リターンDOM要素ではなく、我々はそれを変換する必要があるので、jqueryの要素もう一度.css()メソッドを適用したい場合は

最終ポイント:#989898は灰色で、#FA6900がオレンジ

+0

で非常にありがとうございました!それは働く:)私は非常に満足していると私はJavascriptを学ぶ/ JQueryを開始する必要があります! ---------------------------------------- はいわかりましたが、私は設定しましたテストのためのこれらのランダムな色: ありがとう! – Sineth