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)') {
    //...
}

变量使用条件不工作？

2 个答案: