Question

我有一个受this Code Pen启发的代码。
这是一个液体进度条！

我将我的整个代码附加到原始代码上（我正在为val动态分配不同的值）。

问题：这是我的代码未添加类的地方：（它运行代码但未添加类）

   setTimeout(function(){

  if (val < 50) {
    console.log("less than 50%: " +window.valOld);
    $(".progress").parent().addClass("red");  
  } else if (50 <= val && val <= 80 ) {

    console.log("50-80: " +window.valOld);

    $(".progress").parent().addClass("orange");
  } else {
    console.log("100%: " +window.valOld);
    $(".progress").parent().addClass("green");
  }

}, 2000)

例如，如果val小于50，那么addClass("red")会使水变成红色，并且如果val值超过80 addClass("green")，对！

我的问题是在原始代码上每次都会发生这种预期的行为，但是即使val的值为100 addClass("green")也不起作用，并且在我的代码中也看到红色或橙色的水泡。为什么这会发生？我完全感到困惑，请帮助我...

这是我的代码：

JS

window.valOld = 0;
runFunc();

setInterval(function(){ 
   console.log('Imported: ' + parent.window.confedenceVar);

   var valUpdate = parent.window.confedenceVar;
       console.log("valUpdate: " + valUpdate);
     console.log("valOld: " + window.valOld);

  if(valUpdate !== window.valOld){
     console.log("val Changed");

     window.valOld = valUpdate;
     runFunc();
};

}, 5000);

function runFunc(){

        $(".progress").parent().addClass("red");

var val = window.valOld;

 setTimeout(function(){

         if (val < 50) {
       console.log("less than 50%: " +window.valOld);
        $(".progress").parent().addClass("red");  
} else if (50 <= val && val <= 80 ) {

  console.log("50-80: " +window.valOld);

        $(".progress").parent().addClass("orange");
} else {
  console.log("100%: " +window.valOld);
        $(".progress").parent().addClass("green");
}

}, 2000)     

// Set the initial percent
$(".progress .percent").text(0 + "%");

// Set animation start
$(".progress .water").css("top", 100 + "%");

// Trigger animation in 2000ms (2 seconds)
setTimeout(function(){
  $(".progress .percent").text(val + "%");

$(".progress .water").css("top", 100 - val + "%");  
}, 2000)

console.log("valOld End: " +window.valOld);
}

HTML

<script src="jquery-3.4.0.min.js"></script>

<link rel="stylesheet" href="Style.css">




<div class="wrapper">



  <div class="green">
    <div class="progress">
      <div class="inner">
        <div class="water"></div>
        <div class="glare"></div>
      </div>
    </div>
  </div>


</div>
<script src="Script.js"></script>

CSS

    html {
    overflow: hidden; 
      width: 200px;
      height: 100%;
      transform :scale(0.21);

      margin-top: -34px;
      margin-left: -86px;
    }
    body {
      height: 100%;
    }
    body {
      background-color: transparent;
      font-family: sans-serif;
      font-size: 15px;
      color: #ccc;
    }
    .wrapper {
      display: -ms-flexbox;
      display: box;
      display: flex;
      -o-box-align: center;
      align-items: center;
      -o-box-pack: center;
      justify-content: center;
      -o-box-orient: vertical;
      flex-direction: column;
      height: 100%;
    }
    .green {
      margin-top: 15px;
    }

    .green .progress .inner,
    .red .progress .inner,
    .orange .progress .inner {
      position: absolute;
      overflow: hidden;
      z-index: 10;
      border-radius: 50%;
      background-color: transparent;
    }
    .green .progress .inner,
    .red .progress .inner,
    .orange .progress .inner {
      width: 240px;
      height: 240px;
    }
    .green .progress .inner,
    .red .progress .inner,
    .orange .progress .inner {
      transition: all 1s ease;
    }
    .green .progress .inner .water,
    .red .progress .inner .water,
    .orange .progress .inner .water {
      position: absolute;
      z-index: 1;
      width: 200%;
      height: 200%;
      left: -50%;
      border-radius: 40%;
      -webkit-animation-iteration-count: infinite;
      animation-iteration-count: infinite;
      -webkit-animation-timing-function: linear;
      animation-timing-function: linear;
      -webkit-animation-name: spin;
      animation-name: spin;
    }
    .green .progress .inner .water {
      top: 25%;
    }
    .green .progress .inner .water {
      background: rgba(83,252,83,0.7);
    }
    .green .progress .inner .water,
    .red .progress .inner .water,
    .orange .progress .inner .water {
      transition: all 1s ease;
    }
    .green .progress .inner .water,
    .red .progress .inner .water,
    .orange .progress .inner .water {
      -webkit-animation-duration: 10s;
      animation-duration: 10s;
    }
    .green .progress .inner .water {
      box-shadow: 0 0 20px #03bc03;
    }
    .green .progress .inner .glare,
    .red .progress .inner .glare,
    .orange .progress .inner .glare {
      position: absolute;

      top: -120%;
      left: -120%;
      z-index: 5;
      width: 200%;
      height: 200%;
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
      border-radius: 50%;
    }
    .green .progress .inner .glare,
    .red .progress .inner .glare,
    .orange .progress .inner .glare {
      background-color: rgba(255,255,255,0.15);
    }
    .green .progress .inner .glare,
    .red .progress .inner .glare,
    .orange .progress .inner .glare {
      transition: all 1s ease;
    }
    .green .progress .inner .percent,
    .red .progress .inner .percent,
    .orange .progress .inner .percent {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      font-weight: bold;
      text-align: center;
    }
    .green .progress .inner .percent,
    .red .progress .inner .percent,
    .orange .progress .inner .percent {
      line-height: 240px;
      font-size: 48px;
    }
    .green .progress .inner .percent {
      color: #03c603;
    }
    .green .progress .inner .percent {
      text-shadow: 0 0 10px #029502;
    }
    .green .progress .inner .percent,
    .red .progress .inner .percent,
    .orange .progress .inner .percent {
      transition: all 1s ease;
    }
    .red {
      margin-top: 15px;
    }
    .red .progress .inner .water {
      top: 75%;
    }
    .red .progress .inner .water {
      background: rgba(237,59,59,0.7);
    }
    .red .progress .inner .water {
      box-shadow: 0 0 20px #9b0e0e;
    }
    .red .progress .inner .percent {
      color: #a30f0f;
    }
    .red .progress .inner .percent {
      text-shadow: 0 0 10px #7a0b0b;
    }
    .orange {
      margin-top: 15px;
    }

    .orange .progress .inner .water {
      top: 50%;
    }
    .orange .progress .inner .water {
      background: rgba(240,124,62,0.7);
    }
    .orange .progress .inner .water {

      box-shadow: 0 0 20px #a0400c;
    }
    .orange .progress .inner .percent {
      color: #ffffff;
    }
    .orange .progress .inner .percent {
      text-shadow: 0 0 10px #7e320a;
    }
    #copyright {
      margin-top: 25px;
      background-color: transparent;
      font-size: 14px;
      color: #b3b3b3;
      text-align: center;
    }
    #copyright div {
      margin-bottom: 10px;
    }
    #copyright a,
    #copyright a:link {
      color: #808080;
      text-decoration: none;
      border-bottom: 1px solid #808080;
      padding-bottom: 2px;
    }
    #copyright a:active {
      color: #b3b3b3;
    }
    #copyright a:hover {
      color: #b3b3b3;
      border-bottom: 1px solid #b3b3b3;
      padding-bottom: 4px;
    }
    .instructions {
      display: inline-block;
      margin: 5px 0;
      font-size: 16px;
    }
    @-webkit-keyframes spin {
      from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }
    @keyframes spin {
      from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }

Answer 1

为了覆盖一个类，您将需要先删除旧的类。通过不向removeClass传递任何内容，您将删除该对象的所有类。

$(".progress").parent().removeClass().addClass("green");

如何通过添加CSS类来解决此问题？

1 个答案: