2016-11-16 97 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