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

Question

我有一个如下所示的对象:

我试图为显示的对象中的每个键(即:'publicExploit、activeAttacks..etc)创建 10 个 div 并设置每个 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;
}

我有 2 个问题:

1. 我觉得我的代码编写方式太草率了，有没有更好的方法编写根据与它关联的值生成div的代码？
2. 我无法获得正确的条件 else if(value.denialOfService === 2 || value.denialOfService === 3 || value.denialOfService === 4)这里我尝试设置 div 背景，其值在 2-4 之间，但无法正确渲染。

有什么线索可以解决这个问题

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>';
        }
      }
    )
  })
]