如何動態更新CSS通過jquery創建圖標

Question

我已經使用css3創建了一個框，並在其中應用了一些漸變色彩方案。我想要實現的是我想要改變顏色並通過JQuery按照百分比填充空白空間，但是我在邏輯上失敗了，我甚至沒有找到合適的結果。

section { 
 
       /* background: #dce7eb; */ 
 
       margin-top: 50px; 
 
       width: 100%; 
 
       height: 100%; 
 
       display: flex; 
 
       align-items: center; 
 
      } 
 

 
      .box { 
 
       background: rgba(64,231,173,1); 
 
       background: -moz-linear-gradient(left, rgba(64,231,173,1) 1%, rgba(68,237,168,1) 24%, rgba(77,248,157,1) 69%, rgba(82,255,151,1) 97%); 
 
       background: -webkit-gradient(left top, right top, color-stop(1%, rgba(64,231,173,1)), color-stop(24%, rgba(68,237,168,1)), color-stop(69%, rgba(77,248,157,1)), color-stop(97%, rgba(82,255,151,1))); 
 
       background: -webkit-linear-gradient(left, rgba(64,231,173,1) 1%, rgba(68,237,168,1) 24%, rgba(77,248,157,1) 69%, rgba(82,255,151,1) 97%); 
 
       background: -o-linear-gradient(left, rgba(64,231,173,1) 1%, rgba(68,237,168,1) 24%, rgba(77,248,157,1) 69%, rgba(82,255,151,1) 97%); 
 
       background: -ms-linear-gradient(left, rgba(64,231,173,1) 1%, rgba(68,237,168,1) 24%, rgba(77,248,157,1) 69%, rgba(82,255,151,1) 97%); 
 
       background: linear-gradient(to right, rgba(64,231,173,1) 1%, rgba(68,237,168,1) 24%, rgba(77,248,157,1) 69%, rgba(82,255,151,1) 97%); 
 
       filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#40e7ad', endColorstr='#52ff97', GradientType=1); 
 
       width: 66px; 
 
       height: 80px; 
 
       display: inline-block; 
 
       margin:0 auto; 
 

 
       position: relative; 
 
       -webkit-border-bottom-right-radius: 6px; 
 
       -webkit-border-bottom-left-radius: 6px; 
 
       -moz-border-radius-bottomright: 6px; 
 
       -moz-border-radius-bottomleft: 6px; 
 
       border-bottom-right-radius: 6px; 
 
       border-bottom-left-radius: 6px; 
 
      } 
 

 
      .box i { 
 
       position:relative; 
 
       width: 58px; 
 
       height:70px; 
 
       background:#fff; 
 
       display:block; 
 
       margin:5px auto; 
 
       border-radius: 5px; 
 
      } 
 

 
      .box:hover span { 
 
       transform: rotate(-45deg); 
 
       transition: transform 250ms; 
 
      }

<section> 
 
    <span class="box"> 
 
     <span></span> 
 
     <i></i> 
 
    </span> 
 
</section>

目前箱子是空的狀態，我假設盒子的100％，0％我想要做的就是我想通過jQuery的也變化動態地填補了空白隨着％增加，框的背景。就像我的jQuery代碼遇到50作爲數字，即50％，那麼jQuery應該改變背景顏色並填充框50％。

對我來說很難實現它。任何人都可以用這個邏輯幫助我嗎？

Answer 1

像這樣的東西應該做的 - 這計數的東西作爲一個數字，並用它來設置漸變百分比

var n = $("div").length; //number 
var nOver = n+1; 
$('.box').css('background','-webkit-linear-gradient(left, rgba(174,188,191,1) 0%,rgba(110,119,116,1) '+n+'%,rgba(10,14,10,1) '+nOver+'%,rgba(10,8,9,1) 100%)'); 

var n = $("i").length; //number 
 
    var nOver = n+1; 
 
    $('.box').css('background','-webkit-linear-gradient(left, rgba(174,188,191,1) 0%,rgba(110,119,116,1) '+n+'%,rgba(10,14,10,1) '+nOver+'%,rgba(10,8,9,1) 100%)');

section { 
 
       /* background: #dce7eb; */ 
 
       margin-top: 50px; 
 
       width: 100%; 
 
       height: 100%; 
 
       display: flex; 
 
       align-items: center; 
 
      } 
 

 
      .box { 
 
       background: rgba(64,231,173,1); 
 
       
 
       width: 66px; 
 
       height: 80px; 
 
    
 
       margin:0 auto; 
 

 

 
      } 
 

 
      .box i { 
 
       position:relative; 
 
       width: 58px; 
 
       height:70px; 
 
       
 
       display:block; 
 
       margin:5px auto; 
 
       border-radius: 5px; 
 
      } 
 

 
      .box:hover span { 
 
       transform: rotate(-45deg); 
 
       transition: transform 250ms; 
 
      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<p>test gradient</p> 
 

 
<section> 
 
    <span class="box"> 
 
     <span></span> 
 
     <i></i> 
 
     <i></i> 
 
     <i></i> 
 
     <i></i> 
 
     <i></i><i></i><i></i> 
 
     <i></i> 
 
     <i></i> 
 
     <i></i> 
 
     <i></i> 
 
     <i></i> 
 
     <i></i> 
 
     <i></i> 
 
     <i></i> 
 
     <i></i> 
 
     <i></i> 
 
     <i></i> 
 
     <i></i> 
 
     <i></i> 
 
     <i></i> 
 
     <i></i> 
 
     <i></i> 
 
     <i></i> 
 
     <i></i> 
 
    </span> 
 
</section>