2016-11-16 39 views
0

我有一個項目「智能住宅」,我使用Arduino Mega和以太網盾。我的問題是將數據從arduino連接到GUI網站(我是JS的初學者)。 當我按下按鈕時,數據被髮送到Arduino,我的按鈕顏色從紅色變爲綠色(亮起) - >這沒關係。Arduino和JS/Cpp

然後,如果我打開門我想從紅格到綠色的顏色變化,我不知道如何..

這是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。

這是教程原單碼:

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> 

所以綜上所述,我需要將DIV背景顏色從紅色改爲綠色,而不是字符串開/關。

如果有人有時間可以幫助我,我會非常感謝!

回答

0

代碼$('.doors').css('background', '#989898');更改包含「門」類的所有容器的背景。在你的陳述中,如果最後一次迭代更改#FA6900的背景,則所有div都將獲得#FA6900的顏色。

如果你想改變只有一個容器,你必須寫:

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

有兩個時間$()因爲.get()返回DOM元素,而不是一個jQuery元素,所以我們需要改變它再次如果我們想要應用.css()方法。

末點:#989898是灰色和#FA6900是橙色

+0

非常感謝你非常感謝!它的工作:)我非常高興,我必須開始學習JavaScript/JQuery! ---------------------------------------- 是的,我知道,但我設置這些隨機顏色進行測試:) 謝謝! – Sineth