将百分比标签添加到进度条 jquery答案

【问题标题】：Adding a percentage label to progress bar jquery将百分比标签添加到进度条 jquery
【发布时间】：2014-03-07 00:59:32
【问题描述】：

我目前有一个链接到复选框的进度条，我想添加一个标签来说明进度条的当前百分比，这可能吗？我将如何实现它？

当前实时版本 = http://jsfiddle.net/ezanker/UznQe/1/

代码

<!DOCTYPE html>
<html>
<head>
    <title>Bars for checklist</title>
    <meta name="viewport" content="width=device-width"/>
 <link rel="stylesheet" href="themes/theme1.min.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <meta charset="utf-8">



    <link rel="stylesheet" href="jqm/demos/css/themes/default/jquery.mobile-1.3.2.min.css" />


    <script src="jqm/demos/js/jquery.js">
    </script>

    <script src="jqm/demos/js/jquery.mobile-1.3.2.min.js">
    </script>

    <script>

        $(document).on('pagebeforeshow', '#checklist', function () {
            $('input[type="checkbox"]').each(function () {
                ($(this).is(':checked')) ? $(this).parent().parent().addClass('checked') : $(this).parent().parent().addClass('not-checked');
            });
        });


        $(document).on('click', '.checkBoxLeft', function () {
            if ($(this).find('input[type="checkbox"]').is(':checked')) {
                $(this).removeClass('checked').addClass('not-checked');
                $(this).find('input[type="checkbox"]').attr('checked', false);
            } else {
                $(this).removeClass('not-checked').addClass('checked');
                $(this).find('input[type="checkbox"]').attr('checked', true);
            }

            //calculate percentage
            perc = 0;
            $("#theList input[type=checkbox]:checked").each(function (index) {
                perc += parseInt($(this).val());
            });

            if (perc < 15) {
                $("#progress").css('background', 'red');
            } else if (perc < 30) {
                $("#progress").css('background', 'orange');
            } else if (perc < 60) {
                $("#progress").css('background', 'yellow');
            } else {
                $("#progress").css('background', 'lime');
            }

            $("#progress").css("width", perc + "%");


        });




    </script>
</head>
<body>





     <div data-role="main" class="ui-content">
    <div data-role="collapsible">
      <h1>Task list</h1>




        <div data-role="content">
            <ul data-role="listview" id="theList" data-inset="true">
                <li>



                    <div class="checkBoxLeft">
                        <input type="checkbox" name="checkbox-0" id="checkbox-0" value="15" class="hidden-checkbox"/>
                    </div>                    
                    <a href="" class="detailListText">Task 1 (15%)</a>
                </li>
                <li>
                    <div class="checkBoxLeft">
                        <input type="checkbox" name="checkbox-0" id="checkbox-0" value="40"class="hidden-checkbox"/>
                    </div>                     
                    <a href="" class="detailListText">Task 2 (40%)</a>
                </li>
                <li>
                    <div class="checkBoxLeft">
                        <input type="checkbox" name="checkbox-0" id="checkbox-0" value="5" class="hidden-checkbox"/>
                    </div>                     
                    <a href="" class="detailListText">Task 3 (5%)</a>
                </li>
                 <li>
                    <div class="checkBoxLeft">
                        <input type="checkbox" name="checkbox-0" id="checkbox-0" value="10" class="hidden-checkbox"/>
                    </div>                     
                    <a href="" class="detailListText">Task 4 (10%)</a>
                </li>
                 <li>
                    <div class="checkBoxLeft">
                        <input type="checkbox" name="checkbox-0" id="checkbox-0" value="15"class="hidden-checkbox"/>
                    </div>                     
                    <a href="" class="detailListText">Task 5 (15%)</a>
                </li>
                 <li>
                    <div class="checkBoxLeft">
                        <input type="checkbox" name="checkbox-0" id="checkbox-0" value="15" class="hidden-checkbox"/>
                    </div>                     
                    <a href="" class="detailListText">Task 6 (15%)</a>
                </li>
            </ul>
            </div>
        </div>

            <div class="meter green nostripes">
                <span id="progress" style="width: 0%"></span>
            </div>
        </div>









        <style>

            .detailListText{
    margin: 0 0 0 20px;
}

.checkBoxLeft{
    position: absolute; 
    left: 10px; 
    top: 28%;
    width: 18px;
    height: 18px;
    background: #d9d9d9;
    border-radius: 3px;  
}



.hidden-checkbox {
    display: none;
}


.not-checked {
    background-position: 18px 0;   
    background-color:#d9d9d9;
}


.checked {
    background-position: 0 0;   
    background-color:#6496bc;    
}

        .meter { 
            height: 20px;
            position: relative;
            margin: 60px 0 20px 0;
            background: #555;
            -moz-border-radius: 25px;
            -webkit-border-radius: 25px;
            border-radius: 25px;
            padding: 10px;
            -webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
            -moz-box-shadow   : inset 0 -1px 1px rgba(255,255,255,0.3);
            box-shadow        : inset 0 -1px 1px rgba(255,255,255,0.3);
        }
        .meter > span {
            display: block;
            height: 100%;
               -webkit-border-top-right-radius: 8px;
            -webkit-border-bottom-right-radius: 8px;
                   -moz-border-radius-topright: 8px;
                -moz-border-radius-bottomright: 8px;
                       border-top-right-radius: 8px;
                    border-bottom-right-radius: 8px;
                -webkit-border-top-left-radius: 20px;
             -webkit-border-bottom-left-radius: 20px;
                    -moz-border-radius-topleft: 20px;
                 -moz-border-radius-bottomleft: 20px;
                        border-top-left-radius: 20px;
                     border-bottom-left-radius: 20px;
            background-color: rgb(43,194,83);
            background-image: -webkit-gradient(
              linear,
              left bottom,
              left top,
              color-stop(0, rgb(43,194,83)),
              color-stop(1, rgb(84,240,84))
             );
            background-image: -moz-linear-gradient(
              center bottom,
              rgb(43,194,83) 37%,
              rgb(84,240,84) 69%
             );
            -webkit-box-shadow: 
              inset 0 2px 9px  rgba(255,255,255,0.3),
              inset 0 -2px 6px rgba(0,0,0,0.4);
            -moz-box-shadow: 
              inset 0 2px 9px  rgba(255,255,255,0.3),
              inset 0 -2px 6px rgba(0,0,0,0.4);
            box-shadow: 
              inset 0 2px 9px  rgba(255,255,255,0.3),
              inset 0 -2px 6px rgba(0,0,0,0.4);
            position: relative;
            overflow: hidden;
        }
        .meter > span:after, .animate > span > span {
            content: "";
            position: absolute;
            top: 0; left: 0; bottom: 0; right: 0;
            background-image: 
               -webkit-gradient(linear, 0 0, 100% 100%, 
                  color-stop(.25, rgba(255, 255, 255, .2)), 
                  color-stop(.25, transparent), color-stop(.5, transparent), 
                  color-stop(.5, rgba(255, 255, 255, .2)), 
                  color-stop(.75, rgba(255, 255, 255, .2)), 
                  color-stop(.75, transparent), to(transparent)
               );
            background-image: 
                -moz-linear-gradient(
                  -45deg, 
                  rgba(255, 255, 255, .2) 25%, 
                  transparent 25%, 
                  transparent 50%, 
                  rgba(255, 255, 255, .2) 50%, 
                  rgba(255, 255, 255, .2) 75%, 
                  transparent 75%, 
                  transparent
               );
            z-index: 1;
            -webkit-background-size: 50px 50px;
            -moz-background-size: 50px 50px;
            background-size: 50px 50px;
            -webkit-animation: move 2s linear infinite;
            -moz-animation: move 2s linear infinite;
               -webkit-border-top-right-radius: 8px;
            -webkit-border-bottom-right-radius: 8px;
                   -moz-border-radius-topright: 8px;
                -moz-border-radius-bottomright: 8px;
                       border-top-right-radius: 8px;
                    border-bottom-right-radius: 8px;
                -webkit-border-top-left-radius: 20px;
             -webkit-border-bottom-left-radius: 20px;
                    -moz-border-radius-topleft: 20px;
                 -moz-border-radius-bottomleft: 20px;
                        border-top-left-radius: 20px;
                     border-bottom-left-radius: 20px;
            overflow: hidden;
        }

        .animate > span:after {
            display: none;
        }



        </style>
    </div>   
</body>
</html>

【问题讨论】：

标签： jquery jquery-mobile label progress-bar

【解决方案1】：

RossG 给出了正确答案。如果你想节省空间，你可以像这样把标签放在进度条里面：

<div class="meter green nostripes"> 
    <span id="progress" style="width: 0%"></span>
    <div id="labelProg">0%</div>
</div>

#labelProg{
    display: inline;
    position: absolute;
    color: #eee;
    line-height: 40px;
    height: 40px;
    top: 0px;
    right: 26px;
    text-shadow: 1px 1px #222;
}

将文本放入div中：

$("#labelProg").text(perc + "%");

这是更新后的FIDDLE

【讨论】：

另一个很棒的答案ezanker！您对我之前的评论有什么建议或解决方案吗？
在字段中写注释与写百分比是一样的。您希望它是一个文本，还是希望在不同的地方有 2 个单独的字段？ jsfiddle.net/ezanker/UznQe/6
你刚刚提供的最后一个小提琴是完美的！谢谢。

【解决方案2】：

在某处添加标签跨度：

<span><strong>Progress: </strong></span><span id="progressText">0 %</span>

用 jQuery 中的 perc 变量填充它：

$("span#progressText").text(perc + ' %');

Here is the fiddle.

【讨论】：

这正是我想要的！谢谢。有没有办法让我在标签中发表评论？例如，如果百分比低，请评论说“需要更多努力”，反之，如果百分比高，请评论说“做得好”？。
看起来ezanker 回答了这个问题。而且您可以将任何您想要的文本放入#labelProg...您已经有一段代码可以检查低进度和高进度...所以您可以将 $("#labelProg").text(perc + "% 不管你想要”）在那个部分。
谢谢，我是学习 jquery 的新手，所以我很感激我得到的任何帮助/建议。