Question

用例：- 实际上，我想在同一页面上使用多个进度条，并且希望每个进度条具有不同的颜色。我知道我们可以修改“ ui-progressbar-value” CSS类，但这会使该页面中所有进度条的颜色都得到修改。因此，有一种方法可以实现具有多种颜色的进度条。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI ProgressBar functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         .ui-widget-header {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
            font-weight: bold;
         }
    .ui-progressbar-value{
        background: yellow !important;
    }
      </style>
      
      <script>
         $(function() {
            var progressbar = $( "#progressbar-2" );
            $( "#progressbar-2" ).progressbar({
               value: 30,
               max:30,
                classes: {
    "ui-progressbar-value": "test"
  }
            }).addClass('test');
            function progress() {
               var val = progressbar.progressbar( "value" ) || 0;
               progressbar.progressbar( "value", val + 1 );
               if ( val < 99 ) {
                  setTimeout( progress, 100 );
               }
            }
            
            var progressbar2 = $( "#progressbar-3" );
            $( "#progressbar-3" ).progressbar({
               value: 30,
               max:30
            }).addClass("trst");
            function progress() {
               var val = progressbar.progressbar( "value" ) || 0;
               progressbar.progressbar( "value", val + 1 );
               if ( val < 99 ) {
                  setTimeout( progress, 100 );
               }
            }
            setTimeout( progress, 3000 );
         });
         $('#progressbar-2').css({background: '#9CFF29'});
            
      </script>
   </head>
   
   <body>
     <p>
     Progress 1
     </p>
       <div id = "progressbar-2" class="test"></div>
           <p>
     Progress 2
     </p>
      <div id = "progressbar-3"></div>
   </body>
</html>

Answer 1

$(function() {
            var progressbar = $( "#progressbar-2" );
            $( "#progressbar-2" ).progressbar({
               value: 30,
               max:30,
                classes: {
    "ui-progressbar-value": "test"
  }
            }).addClass('test');
            function progress() {
               var val = progressbar.progressbar( "value" ) || 0;
               progressbar.progressbar( "value", val + 1 );
               if ( val < 99 ) {
                  setTimeout( progress, 100 );
               }
            }
            
    var progressbar2 = $( "#progressbar-3" );
            $( "#progressbar-3" ).progressbar({
               value: 30,
               max:30
            }).addClass("trst");
            function progress() {
               var val = progressbar.progressbar( "value" ) || 0;
               progressbar.progressbar( "value", val + 1 );
               if ( val < 99 ) {
                  setTimeout( progress, 100 );
               }
            }
            setTimeout( progress, 3000 );
         });
         $('#progressbar-2').css({background: '#9CFF29'});

.ui-widget-header {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
            font-weight: bold;
         }
 #progressbar-2 > .ui-progressbar-value{
    background: green !important;
}
 #progressbar-3 > .ui-progressbar-value{
    background: yellow !important;
}

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI ProgressBar functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

   </head>
   
   <body>
     <p>
     Progress 1
     </p>
       <div id = "progressbar-2" class="test"></div>
           <p>
     Progress 2
     </p>
      <div id = "progressbar-3"></div>
   </body>
</html>

Ref Css子选择器https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator。对于第一个进度条，请使用

 #progressbar-2 > .ui-progressbar-value{
    background: green !important;
}

第二次使用

 #progressbar-3 > .ui-progressbar-value{
    background: yellow!important;
}

如何添加更改jQuery进度条的颜色

1 个答案: