Question

我通过来自Microsoft Recognition Services API的JSON响应获取ajax。我在HTML中正确地接收并输入收到的数据。

但我想做以下事情：他正在经历＆＃34; Face＆＃34;包含人的性别信息的数组，条件如下：

如果是男性，请添加背景色蓝色，如果是女性，请添加背景色粉红色，并且可以同时提供男女信息。

我只能添加一种颜色，我一次不能添加多种颜色。

代码1：

var iconSexColor = document.getElementsByClassName('icon-sex-color');

function CheckSex__(objJSON){
  for(fac in objJSON.faces){
    console.log(objJSON.faces[fac].gender);
    if(objJSON.faces[fac].gender === "Male"){
      //console.log("M:");
      InsertColorSex__("Male");
    } else if(objJSON.faces[fac].gender === "Female"){
      //console.log("F");
      InsertColorSex__("Female");
    } else{
      // TODO
    }
  }
}

function InsertColorSex__(typeSex){
  console.log("t:", typeSex);
  if(typeSex === "Male"){
    console.log("OI: M");
    for(var count = 0; count < iconSexColor.length; count++){
      iconSexColor[count].style.backgroundColor = "blue";
    }
  } else if(typeSex === "Female"){
    console.log("OI: F");
    for(var count = 0; count < iconSexColor.length; count++){
      iconSexColor[count].style.backgroundColor = "pink";
    }
  } else{
    // TODO
  }

}

代码2：

      .done(function(data){
        // Transforma o JSON(DATA) Recebido em Objeto.
        var objJSON = JSON.parse(JSON.stringify(data, null, 2));
        console.log(objJSON);
        GeneratePeoples__(objJSON);
        GenerateCaptions__(objJSON);
        GenerateCelebrities__(objJSON);
        CheckSex__(objJSON);

      })

 function GenerateCelebrities__(objJSON){
  for(cat in objJSON.categories){
    for(cel in objJSON.categories[cat].detail.celebrities){
      document.getElementById('celebrities-information').innerHTML +=
      '<ul class="collapsible" data-collapsible="accordion">' +
        '<li>' +
          '<div class="collapsible-header"><i class="fa fa-id-card-o" aria-hidden="true"></i><strong>Celebrity ('+ cap++ +')</strong></div>' +
          '<div class="collapsible-body white">' +
            '<ul class="collection">' +
              '<li class="collection-item avatar">' +
                '<i class="icon-sex-color fa fa-star circle yellow-text" aria-hidden="true"></i>' +
                '<span class="title title-collection-content-information">Celebrity Name</span>' +
                '<p><strong>'+ objJSON.categories[cat].detail.celebrities[cel].name +'</strong></p>' +
                '<a href="#!" class="secondary-content">' +
                  '<span class="new black badge" data-badge-caption=" "><strong>'+ objJSON.categories[cat].detail.celebrities[cel].confidence +" %" +'</strong></span>' +
                  '<span class="new black badge" data-badge-caption=" "><strong>Confidence</strong></span>' +
                '</a>' +
              '</li>' +
            '</ul>' +
          '</div>' +
        '</li>' +
      '</ul>';
    }
  }
  InicializarCollapsible__();
};

在此处插入颜色：

'<i class="fa fa-star circle yellow-text '+ InsertColorSex__() +'" aria-hidden="true"></i>' +

Answer 1

InsertColorSex__()正在元素的css类中写入内容，因此它可以添加一个更改background-color css属性的类。

另一件事是你的CheckSex__(objJSON)函数，它试图循环结果，但如果男性或女性，则返回性别的第一次出现。但是假设它正常工作，正如您在控制台日志中显示的那样，您可以使用该函数将粉红色或蓝色类添加到he元素，因为您将objJSON传递给HTML的函数GenerateCelebrities__ building。 / p>

'<i class="fa fa-star circle yellow-text '+ CheckSex__(objJSON) +'" aria-hidden="true"></i>'

因此，在添加之后，您应该在CSS样式表中声明CSS规则。

.pink { background-color: pink; }
.blue { background-color: blue; }

Answer 2

我仍然无法弄清楚你的控制台，但你应该做的是在生成html之前你应该通过检查性别在你的类别数组对象中添加颜色属性。应该有一些id或值可以让你知道哪个性别属于哪个类别（我的意思是celeberaty）

例如

    for(cat in objJSON.categories){
        for(cel in objJSON.categories[cat].detail.celebrities){
            for(fac in objJSON.faces){
                if(objJSON.faces[fac].celebrity_id == objJSON.categories[cat].detail.celebrities[cel].celebrity_id){

                    if(objJSON.faces[fac].gender === "Male"){
                      objJSON.categories[cat].detail.celebrities[cel].color = "blue";     
                    } else if(objJSON.faces[fac].gender === "Female") {
                      objJSON.categories[cat].detail.celebrities[cel].color = "pink";

                    } else {
                      objJSON.categories[cat].detail.celebrities[cel].color = "green";
                    }

                }

            }
        }
    }

现在您可以在

中打印颜色值

'<i class="fa fa-star circle yellow-text" style="color:'+  objJSON.categories[cat].detail.celebrities[cel].color+'" aria-hidden="true"></i>' +

在循环中引用对象属性可能会有一些错误。希望这会给你一些想法。

Answer 3

解决方案是：

function CheckSex__(objJSON) {
  for (fac in objJSON.faces) {
    if (objJSON.faces[fac].gender === "Male") {
      $('#icon-sex-color'+ fac).css("background-color", "#1565c0");
    } else if (objJSON.faces[fac].gender === "Female") {
      $('#icon-sex-color'+ fac).css("background-color", "#e91e63");
    } else {
      // TODO
    }
  }
}

如何使用此元素类型更改背景颜色？

3 个答案: