如何根据json对象呈现的值为div生成背景色。-javascript

Question

我有一个对象，如下所示：

​

​

我试图在显示的对象中为每一个键创建10个divs (即：‘public开发包，activeAttacks..etc)，并根据值设置每个div的背景色，即

• 0:灰色
• 1:黄色
• 2-4:橙色
• 5+：红色

以下是代码：

items: [
  this.info = new Ext.BoxComponent({
    tpl: new Ext.XTemplate(
      '<div class="vuln-summary-status-item">',
      '<div class="vuln-summary-status-item-inner">text1{[this.getEasyExploit(values)]}</div>',
      '<div class="vuln-summary-status-item-inner">text2{[this.getDenialOfService(values)]}</div>',
      '<div class="vuln-summary-status-item-inner">text3{[this.getExploitKit(values)]}</div>',
      '<div class="vuln-summary-status-item-inner">text4{[this.getMalware(values)]}</div>',
      '<div class="vuln-summary-status-item-inner">text5{[this.getHighDataLoss(values)]}</div>',
      '<div class="vuln-summary-status-item-inner">text6{[this.getHighLateralMovement(values)]}</div>',
      '<div class="vuln-summary-status-item-inner">text7{[this.getActiveAttacks(values)]}</div>',
      '</div>', {


        getEasyExploit: function(value) {
          if (value.easyExploit === 0) {
            return '<div class="greyColor">' + value.easyExploit + '</div>'
          } else if (value.easyExploit === 1) {
            return '<div class="yellowColor">' + value.easyExploit + '</div>'
          } else if (value.easyExploit === 2 || value.easyExploit === 3 || value.easyExploit === 4) {
            return '<div class="orangeColor">' + value.easyExploit + '</div>'
          } else if (value.easyExploit >= 5) {
            return '<div class="redColor">' + value.easyExploit + '</div>'
          }
        },
        getDenialOfService: function(value) {
          if (value.denialOfService === 0) {
            return '<div class="greyColor">' + value.denialOfService + '</div>'
          } else if (value.denialOfService === 1) {
            return '<div class="yellowColor">' + value.denialOfService + '</div>'
          } else if (value.denialOfService === 2 || value.denialOfService === 3 || value.denialOfService === 4) {
            return '<div class="orangeColor">' + value.denialOfService + '</div>'
          } else if (value.denialOfService >= 5) {
            return '<div class="redColor">' + value.denialOfService + '</div>'
          }
        },
        getExploitKit: function(value) {
          if (value.exploitKit === 0) {
            return '<div class="greyColor">' + value.exploitKit + '</div>'
          } else if (value.exploitKit === 1) {
            return '<div class="yellowColor">' + value.exploitKit + '</div>'
          } else if (value.exploitKit === 2 || value.exploitKit === 3 || value.exploitKit === 4) {
            return '<div class="orangeColor">' + value.exploitKit + '</div>'
          } else if (value.exploitKit >= 5) {
            return '<div class="redColor">' + value.exploitKit + '</div>'
          }
        },
        getMalware: function(value) {
          if (value.malware === 0) {
            return '<div class="greyColor">' + value.malware + '</div>'
          } else if (value.malware === 1) {
            return '<div class="yellowColor">' + value.malware + '</div>'
          } else if (value.malware === 2 || value.malware === 3 || value.malware === 4) {
            return '<div class="orangeColor">' + value.malware + '</div>'
          } else if (value.malware >= 5) {
            return '<div class="redColor">' + value.malware + '</div>'
          }

        },
        getHighDataLoss: function(value) {
          if (value.highDataLoss === 0) {
            return '<div class="greyColor">' + value.highDataLoss + '</div>'
          } else if (value.highDataLoss === 1) {
            return '<div class="yellowColor">' + value.highDataLoss + '</div>'
          } else if (value.highDataLoss === 2 || value.highDataLoss === 3 || value.highDataLoss === 4) {
            return '<div class="orangeColor">' + value.highDataLoss + '</div>'
          } else if (value.highDataLoss >= 5) {
            return '<div class="redColor">' + value.highDataLoss + '</div>'
          }
        },
        getHighLateralMovement: function(value) {
          if (value.highLateralMovement === 0) {
            return '<div class="greyColor">' + value.highLateralMovement + '</div>'
          } else if (value.highLateralMovement === 1) {
            return '<div class="yellowColor">' + value.highLateralMovement + '</div>'
          } else if (value.highLateralMovement === 2 || value.highLateralMovement === 3 || value.highLateralMovement === 4) {
            return '<div class="orangeColor">' + value.highLateralMovement + '</div>'
          } else if (value.highLateralMovement >= 5) {
            return '<div class="redColor">' + value.highLateralMovement + '</div>'
          }
        },

        getActiveAttacks: function(value) {
          if (value.activeAttacks === 0) {
            return '<div class="greyColor">' + value.activeAttacks + '</div>'
          } else if (value.activeAttacks === 1) {
            return '<div class="yellowColor">' + value.activeAttacks + '</div>'
          } else if (value.activeAttacks === 2 || value.activeAttacks === 3 || value.activeAttacks === 4) {
            return '<div class="orangeColor">' + value.activeAttacks + '</div>'
          } else if (value.activeAttacks >= 5) {
            return '<div class="redColor">' + value.activeAttacks + '</div>'
          }
        },

      }
    )
  })
]

css看起来：

.greyColor {
  background: #e9e9e9;
  height: 120px;
}

.yellowColor {
  background: rgb(255, 198, 55);
  height: 120px;
}

.orangeColor: {
  background: rgb(229, 108, 25);
  height: 120px;
}

.redColor: {
  background: rgb(222, 29, 11);
  height: 120px;
}

我有两个问题：

1. 我觉得我写代码的方式太草率了，根据与它相关的值来编写生成div的代码是否更好呢？
2. 在这里，我无法得到else if(value.denialOfService === 2 || value.denialOfService === 3 || value.denialOfService === 4)的正确条件--我正在尝试设置值介于2-4之间的div背景，但是没有正确地呈现。

有什么线索可以解决吗？

Answer 1

这一项将允许您传递要呈现的文本值。

items: [
  this.info = new Ext.BoxComponent({
    tpl: new Ext.XTemplate(
      '<div class="vuln-summary-status-item">',
      '    <div class="vuln-summary-status-item-inner">{[this.getColorDiv(values.easyExploit, "Easy Exploit")]}</div>',
      '    <div class="vuln-summary-status-item-inner">{[this.getColorDiv(values.denialOfService, "Denial Of Service")]}</div>',
      '    <div class="vuln-summary-status-item-inner">{[this.getColorDiv(values.exploitKit, "Exploit Kit")]}</div>',
      '    <div class="vuln-summary-status-item-inner">{[this.getColorDiv(values.malware, "Malware")]}</div>',
      '    <div class="vuln-summary-status-item-inner">{[this.getColorDiv(values.highDataLoss, "High Data Loss")]}</div>',
      '    <div class="vuln-summary-status-item-inner">{[this.getColorDiv(values.highLateralMovement, "High Lateral Movement")]}</div>',
      '    <div class="vuln-summary-status-item-inner">{[this.getColorDiv(values.activeAttacks, "Active Attacks")]}</div>',
      '</div>', {
        colors: [
          'greyColor',
          'yellowColor',
          'orangeColor',
          'redColor'
        ],
        getColor(value) {
          switch(true) {
            case value < 2:
              return colors[value];
              break;
            case value < 5:
              return colors[2];
              break;
            default:
              return colors[4];
              break;
          } 
        },
        getColorDiv: function(value, text) {
          return '<div class="'+ this.getColor(value).+'">' + text + ": " + value + '</div>';
        }
      }
    )
  })
]

原创

使用颜色数组会更容易，这将使您可以组合您的功能。

items: [
  this.info = new Ext.BoxComponent({
    tpl: new Ext.XTemplate(
      '<div class="vuln-summary-status-item">',
      '    <div class="vuln-summary-status-item-inner">{[this.getColorDiv(values.easyExploit)]}</div>',
      '    <div class="vuln-summary-status-item-inner">{[this.getColorDiv(values.denialOfService)]}</div>',
      '    <div class="vuln-summary-status-item-inner">{[this.getColorDiv(values.exploitKit)]}</div>',
      '    <div class="vuln-summary-status-item-inner">{[this.getColorDiv(values.malware)]}</div>',
      '    <div class="vuln-summary-status-item-inner">{[this.getColorDiv(values.highDataLoss)]}</div>',
      '    <div class="vuln-summary-status-item-inner">{[this.getColorDiv(values.highLateralMovement)]}</div>',
      '    <div class="vuln-summary-status-item-inner">{[this.getColorDiv(values.activeAttacks)]}</div>',
      '</div>', {
        colors: [
          'greyColor',
          'yellowColor',
          'orangeColor',
          'redColor'
        ],
        getColor(value) {
          switch(true) {
            case value < 2:
              return colors[value];
              break;
            case value < 5:
              return colors[2];
              break;
            default:
              return colors[4];
              break;
          } 
        },
        getColorDiv: function(value) {
          return '<div class="'+ this.getColor(value).+'">' + value + '</div>';
        }
      }
    )
  })
]