问根据输入值更改div元素(框)的颜色
EN

Stack Overflow用户

提问于 2017-05-10 13:03:53

回答 1查看 172关注 0票数 0

我需要在彼此旁边显示三个盒子。根据输入值，需要更改框的颜色。例如:如果数字在(1-3)范围内，则第一个框应该显示红色&所有其他框都应该是灰色的；同样，如果一个数字在(4-6)的范围内，则第二个框应该是黄色的，而第一个和第三个框应该是灰色的；如果数字在(7-9)范围内，则第三个框应该是绿色的。

这个想法基本上是为了显示评级。红(1-3)，黄(4-6)，绿(7-9)。因此，如果创新评级包含值2，那么第一个方框应该是红色的。

我尝试了如下方法：

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;
}

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

但我错过了正确的逻辑。你能帮我如何正确地做这件事吗？

javascript

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-05-10 13:20:21

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>

试一试

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/43893354

复制

相似问题

问根据输入值更改div元素(框)的颜色
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问根据输入值更改div元素(框)的颜色EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问根据输入值更改div元素(框)的颜色
EN