有条件的情况下可变使用不起作用？

Question

所以我的HTML中有10个：

<div class="resultContainer">
   <div class="twitchResult" id="charionna">
      <a class="link" href="https://www.twitch.tv/charionna"target="_blank">
         <h3 class="username">charionna</h3>
         <p class="streamInfo"></p>
      </a>
   </div>
</div>

当我向Twitch API发出请求时：

 var xhr = new XMLHttpRequest();
 xhr.open('GET', 'https://api.twitch.tv/kraken/streams/comster404/?client_id=mlrx1e94dg7yus5yqm26lwpyxrg9j9x');
 xhr.onreadystatechange = twitchInfo;
 xhr.send();

并且服务器以非200状态代码响应我让响应处理程序函数像这样运行callSuccessChecker函数：

function twitchInfo() {


     // request NOT succesful
     if(this.readyState == 4 && this.status !== 200) {

     //  console.log('This is working');

     callSuccessChecker();

     }
}

这部分工作正常。

这是callSuccessChecker的问题。 具体来说，使用在条件中声明的变量。 像这样：

function callSuccessChecker() {

      var containerList = document.getElementsByClassName('resultContainer');
      var closedText = document.createTextNode('account closed');

      for (i = 0; i < 10; i++) {// <--------not working YET

          if(containerList[i].style.backgroundColor == 'rgb(245, 209, 107)') {

          containerList[i].children[0].children[0].children[1].appendChild(closedText);
          }
     // console.log (containerList[i].children[0].children[0].children[1]);
     }
}

在此功能中，您可以看到我在底部注释掉了console.log。 当我在此处使用containerList[i] ，它将向我显示控制台中的输出。

但是，当我在if语句和对象内执行相同的操作（在函数中可见）时，无论正确的用语是什么，它似乎都无法工作/激活/抓取。

这是我要在条件中检查其backgroundColor的容器的样式（我在条件中将十六进制代码转换为其等效的RGB）：

.resultContainer {
    height: auto;
    margin-right: 10%;
    margin-left: 10%;
    margin-bottom: 0;
    border-bottom: 1px white solid;
    background-color: #F5D16B;
}

关于这是为什么的任何解释？

是条件性条件本身关闭了吗？

非常感谢您的帮助。

Answer 1

可能存在色值比较的问题。 怎么样：

function isEqualColor(a, b) {
    var elementA = document.createElement("div"),
        elementB = document.createElement("div");
    elementA.style.backgroundColor = a;
    elementB.style.backgroundColor = b;
    return elementA.style.backgroundColor == elementB.style.backgroundColor;
}

function callSuccessChecker() {
    var containerList = document.getElementsByClassName('resultContainer');
    var closedText = document.createTextNode('account closed');

    for (i = 0; i < 10; i++) {
        if(isEqualColor(containerList[i].style.backgroundColor, '#F5D16B')) {
            containerList[i].children[0].children[0].children[1].appendChild(closedText);
        }
        console.log(containerList[i].children[0].children[0].children[1]);
    }
}

Answer 2

这个console.logs块应该可以帮助您确定对象在链中的哪个位置断开：

if(containerList[i].style.backgroundColor == 'rgb(245, 209, 107)') {
    console.log(containerList[i]);
    console.log(containerList[i].children[0]);
    console.log(containerList[i].children[0].children[0]);
    console.log(containerList[i].children[0].children[0].children[1]);
    containerList[i].children[0].children[0].children[1].appendChild(closedText);
}

如果所有这些打印出来的结果都不为空，则appendChild()应该可以工作。

您还可以尝试以其他方式读取backgroundColor ，如下所示：

if(containerList[i].currentStyle['background-color'] == 'rgb(245, 209, 107)') {
    //...
}