Question

我需要彼此相邻显示3个方框。根据输入值，需要更改框的颜色。例如：如果数字在（1-3）＆amp;范围内，则第一个框应显示红色。所有其他盒子应该是灰色的;类似地，如果数字在（4-6）的范围内，则第二个框应为黄色，而第一个和第三个框应为灰色;如果数字在（7-9）范围内，则第三个框应为绿色。

这个想法基本上是显示评级。所以红色（1-3），黄色（4-6）和绿色（7-9）。因此，如果创新评级包含值2，则第一个框应为红色。

我尝试了以下方式：

＆＃13;

var num = 4;
var strColorPairs = Array({
  'position': 0,
  'color': 'red'
}, {
  'position': 1,
  'color': 'yellow'
}, {
  'position': 2,
  'color': 'green'
});

var position = checkPosition(num);


colorBox(position);

function colorBox(position) {
  var divList = document.getElementsByClassName('ratingBox');
  var i, n = divList.length;
  for (i = 0; i < n; i++) {
    curContent = divList[i].children[0].id;
    for (j = 0; j < strColorPairs.length; j++) {
      if (strColorPairs[j].position == curContent)
        divList[i].style.backgroundColor = strColorPairs[j].color;
    }
  }
}

function checkPosition(num) {
  var position;
  if (isInRange(num, 1, 3)) {
    position = 0;
  } else if (isInRange(num, 4, 6)) {
    position = 1;
  } else if (isInRange(num, 7, 9)) {
    position = 2;
  }
  return position;
}

function isInRange(num, min, max) {
  return num >= min && num <= max;
}

＆＃13;

Rating for innovation
<div id="0" class="ratingBox"></div>
<div id="1" class="ratingBox"></div>
<div id="2" class="ratingBox"></div>

＆＃13;

但我错过了正确的逻辑。能否帮助我以正确的方式做到这一点。

Answer 1

var num =1; 
var strColorPairs = Array(
                            {'position' : 0, 'color' : 'red'},
                            {'position' : 1, 'color' : 'yellow'},
                            {'position' : 2, 'color' : 'green'}
                        );

var position = checkPosition(num);


colorBox(position);
 function colorBox(position)
    {
        var divList = document.getElementsByClassName('ratingBox');
        var i, n = divList.length;
        curContent = divList[position].id;
        console.log(curContent);
        for (i=0; i<n; i++)
        {
            
            for (j=0; j<strColorPairs.length; j++)
            {
                if (strColorPairs[j].position == curContent){
                    divList[curContent].style.backgroundColor  = strColorPairs[j].color;
                    }
                else {divList[i].style.backgroundColor  = 'gray'}
            }
        }
    }

function checkPosition(num){
 var position;
   if(isInRange(num,1,3))
     {
      position=0;
     }
     else if(isInRange(num,4,6))
     {
      position=1;
     }
     else if(isInRange(num,7,9))
     {
      position=2;
     }
     return position;
 }

function isInRange(num,min,max){
    return num >= min && num <= max;
 }

.ratingBox{
width:50px;height:50px;}

Rating for innovation 
     <div id="0" class="ratingBox"></div>
     <div id="1" class="ratingBox"></div>
     <div id="2" class="ratingBox"></div>

试

根据输入值更改div元素（框）的颜色

1 个答案: