如何动态更新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>