如何根据值使用 Javascript 更改颜色？答案

【问题标题】：How to change color using Javascript based on value?如何根据值使用 Javascript 更改颜色？
【发布时间】：2018-02-22 10:31:58
【问题描述】：

我正在尝试使用 Javascript 进行转换。如果总@1 = 将圆圈1-7 上的颜色变为绿色，总@4 = 将圆圈8-14 上的颜色变为黄色，总计@7 = 将圆圈15-21 上的颜色变为蓝色，总计@10 =将圆圈 22-31 上的颜色变为红色。

<style>
body{
  background-color: #f1f1f1;
}
.main-timeline-section{
  position: relative; 
  width: 100%;  
  margin:auto; 
  height:300px;
}
.main-timeline-section .timeline-start,
.main-timeline-section .timeline-end{
  position: absolute;
  background:#404040;
  border-radius:100px;
  top:50%;
  transform: translateY(-50%);
  width:30px;
  height:30px;
}
.main-timeline-section .timeline-end{
  right:0px;
}
.main-timeline-section .conference-center-line{
  position: absolute;
  width:100%;
  height:5px;
  top:50%;
  transform: translateY(-50%);
  background:#404040;
}
.timeline-article{
    width: 20%;
    position: relative;
    min-height: 300px;
    float:right;
}
.timeline-article .content-date{
    position: absolute;
    top: 35%;
    left: -5px; 
    font-size:18px;
}
.timeline-article .meta-date{
    position: absolute;
    top: 50%;
    left: 0px;
    transform: translateY(-50%); 
    width:20px;
    height:20px;
    border-radius: 100%;
    background:#fff;
    border:1px solid #c00000;
}
.timeline-article .content-box{
  box-shadow: 2px 2px 4px 0px #c1c1c1;
  border:5px solid #c00000;
  border-radius: 5px;
  background-color: #fff;
  width: 100px;
  position: absolute;
  top: 60%;
  left: -55px; 
  padding:10px;
}
.timeline-article-top .content-box:before{
  content: " ";
  position:absolute; 
  left:50%;
  transform: translateX(-50%);
  top:-20px;
  border:10px solid transparent;
  border-bottom-color: #c00000;
}
.timeline-article-bottom .content-date{
  top: 59%;
}
.timeline-article-bottom .content-box{
  top: 0%;
}
.timeline-article-bottom .content-box:before{
  content: " ";
  position:absolute; 
  left:50%;
  transform: translateX(-50%);
  bottom:-20px;
  border:10px solid transparent;
  border-top-color:#c00000;
}


@media (max-width:460px){
  body{
    display: none;
  }
}
</style>

<html>
<head>
  <title>Major Incident Timeline</title>
</head>
<body>
<div class="container">
  <div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">
      <section class="main-timeline-section">
          <div class="timeline-start"></div>
          <div class="conference-center-line"></div>
          <div class="conference-timeline-content">
            <div class="timeline-article timeline-article-top">
                <div class="content-date">
                    <span>22-31</span>
                </div>
                <div class="meta-date"></div>
                <div class="content-box">
                  <p>Total: <font size = 4 color=#c00000><b>@10</b></font>
              <br><font size = 3><b>@11</b></font>&nbsp P1
              <br><font size = 3><b>@12</b></font>&nbsp P2
              </p>
                </div>
            </div>

            <div class="timeline-article timeline-article-bottom">
                <div class="content-date">
                    <span>15-21</span>
                </div>
                <div class="meta-date"></div>
                <div class="content-box">
                  <p>Total: <font size = 4 color=#c00000><b>@7</b></font>
              <br><font size = 3><b>@8</b></font>&nbsp P1
              <br><font size = 3><b>@9</b></font>&nbsp P2
              </p>
                </div>
            </div>
               <div class="timeline-article timeline-article-top">
                <div class="content-date">
                    <span>8-14</span>
                </div>
                <div class="meta-date"></div>
                <div class="content-box">
                  <p>Total: <font size = 4 color=#c00000><b>@4</b></font>
              <br><font size = 3><b>@5</b></font>&nbsp P1
              <br><font size = 3><b>@6</b></font>&nbsp P2
              </p>
                </div>
            </div>

            <div class="timeline-article timeline-article-bottom">
                <div class="content-date">
                    <span>1-7</span>
                </div>
                <div class="meta-date"></div>
                <div class="content-box">
                  <p>Total: <font size = 4 color=#c00000><b>@1</b></font>
              <br><font size = 3><b>@2</b></font>&nbsp P1
              <br><font size = 3><b>@3</b></font>&nbsp P2
              </p>
                </div>
            </div> 
          </div>
          <div class="timeline-end"></div>
        </section>
    </div>
  </div>
</div>
</body>
</html>

请帮助我实现它。

【问题讨论】：

推算Total的逻辑在哪里？我的意思是你想让@1 成为按钮还是它将是任何数字的总和。请解释一下。
当时间线达到total @ 1时，圆圈1-7变为绿色。我已经设置的总数。

标签： javascript html css event-handling dom-events

【解决方案1】：

$(document).ready(function(){
  var contentDateRange = ['1-7','8-14','15-21','22-31'];
  var colorRange = ['green','yellow','blue','red'];
  
  $('.meta-date').each(function(index, elem){
    
    var dateRange = $(this).prev().find('span').text();
    
    //console.log(dateRange);
    
    var dateRangeIndex = contentDateRange.indexOf(dateRange);
    //console.log(dateRangeIndex);
    
    if(dateRangeIndex!==-1){
      $(this).css({
        'background-color': colorRange[dateRangeIndex],
        'border': '1px solid '+ colorRange[dateRangeIndex]
      });
    }
  });


});

<style>
body{
  background-color: #f1f1f1;
}
.main-timeline-section{
  position: relative; 
  width: 100%;  
  margin:auto; 
  height:300px;
}
.main-timeline-section .timeline-start,
.main-timeline-section .timeline-end{
  position: absolute;
  background:#404040;
  border-radius:100px;
  top:50%;
  transform: translateY(-50%);
  width:30px;
  height:30px;
}
.main-timeline-section .timeline-end{
  right:0px;
}
.main-timeline-section .conference-center-line{
  position: absolute;
  width:100%;
  height:5px;
  top:50%;
  transform: translateY(-50%);
  background:#404040;
}
.timeline-article{
    width: 20%;
    position: relative;
    min-height: 300px;
    float:right;
}
.timeline-article .content-date{
    position: absolute;
    top: 35%;
    left: -5px; 
    font-size:18px;
}
.timeline-article .meta-date{
    position: absolute;
    top: 50%;
    left: 0px;
    transform: translateY(-50%); 
    width:20px;
    height:20px;
    border-radius: 100%;
    background:#fff;
    border:1px solid #c00000;
}
.timeline-article .content-box{
  box-shadow: 2px 2px 4px 0px #c1c1c1;
  border:5px solid #c00000;
  border-radius: 5px;
  background-color: #fff;
  width: 100px;
  position: absolute;
  top: 60%;
  left: -55px; 
  padding:10px;
}
.timeline-article-top .content-box:before{
  content: " ";
  position:absolute; 
  left:50%;
  transform: translateX(-50%);
  top:-20px;
  border:10px solid transparent;
  border-bottom-color: #c00000;
}
.timeline-article-bottom .content-date{
  top: 59%;
}
.timeline-article-bottom .content-box{
  top: 0%;
}
.timeline-article-bottom .content-box:before{
  content: " ";
  position:absolute; 
  left:50%;
  transform: translateX(-50%);
  bottom:-20px;
  border:10px solid transparent;
  border-top-color:#c00000;
}

@media (max-width:460px){
  body{
    display: none;
  }
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
  <title>Major Incident Timeline</title>
</head>
<body>
<div class="container">
  <div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">
      <section class="main-timeline-section">
          <div class="timeline-start"></div>
          <div class="conference-center-line"></div>
          <div class="conference-timeline-content">
            <div class="timeline-article timeline-article-top">
                <div class="content-date">
                    <span>22-31</span>
                </div>
                <div class="meta-date"></div>
                <div class="content-box">
                  <p>Total: <font size = 4 color=#c00000><b>@10</b></font>
              <br><font size = 3><b>@11</b></font>&nbsp P1
              <br><font size = 3><b>@12</b></font>&nbsp P2
              </p>
                </div>
            </div>

            <div class="timeline-article timeline-article-bottom">
                <div class="content-date">
                    <span>15-21</span>
                </div>
                <div class="meta-date"></div>
                <div class="content-box">
                  <p>Total: <font size = 4 color=#c00000><b>@7</b></font>
              <br><font size = 3><b>@8</b></font>&nbsp P1
              <br><font size = 3><b>@9</b></font>&nbsp P2
              </p>
                </div>
            </div>
               <div class="timeline-article timeline-article-top">
                <div class="content-date">
                    <span>8-14</span>
                </div>
                <div class="meta-date"></div>
                <div class="content-box">
                  <p>Total: <font size = 4 color=#c00000><b>@4</b></font>
              <br><font size = 3><b>@5</b></font>&nbsp P1
              <br><font size = 3><b>@6</b></font>&nbsp P2
              </p>
                </div>
            </div>

            <div class="timeline-article timeline-article-bottom">
                <div class="content-date">
                    <span>1-7</span>
                </div>
                <div class="meta-date"></div>
                <div class="content-box">
                  <p>Total: <font size = 4 color=#c00000><b>@1</b></font>
              <br><font size = 3><b>@2</b></font>&nbsp P1
              <br><font size = 3><b>@3</b></font>&nbsp P2
              </p>
                </div>
            </div> 
          </div>
          <div class="timeline-end"></div>
        </section>
    </div>
  </div>
</div>
</body>
</html>

【讨论】：

对您的 sn-p 所做的更改是您可以在此处为每个圈子包含一个类，元日期。您可以相应地设置它们的样式。在提供的 sn-p 中完成。
javascript 在哪里？当我的数据带有 BI 时我需要它，然后圆圈会根据我之前设置的过滤器变为颜色。