Question

我希望每次单击按钮时将进度条的宽度增加10％：

<div id="#progressBar" style="width:50%"> </div>

当我点击按钮时，我想将进度条的宽度增加10％。

我尝试了这个，但它不起作用：

$("#increaseButton").click(function() {
     $("#progressBar").css("width",$("#div2increase").width + 10 );
});

请帮忙！

进度条的当前宽度可以是0％到100％之间的任何值。并且在将其增加10％

时尚不得而知

Answer 1

以下代码在单击按钮时会增加10％的条形。当条达到100％时，您无法再增加尺寸。

这是非常基本的，但我希望它可以帮助你开始。

http://jsfiddle.net/x8w2fbcg/6/

 <div id="progressBar">bar</div>
    <div id="progressBarFull"> &nbsp;</div>
    <button id="btn" type="button">enlarge</button>



    $( "#btn" ).click(function() {
        var curSize = $("#progressBar").width();
        var fullSize = $("#progressBarFull").width();
        if(curSize < 100) {
            var increment = fullSize/ 10;
       $("#progressBar").css('width', '+=' + increment);
        }
    });


    #progressBar {
        position: fixed;
        height: 20px;
        width: 0px;
        background-color: red;
    z-index: 10;    
    }
    #progressBarFull {
        position: fixed;
        height: 20px;
        width: 100px;
        background-color: gray;    
    }
    #btn {
          position: fixed;
        top: 100px;  

    }

Answer 2

如果您使用的是%，则元素会从其父级宽度继承%，因此您需要在添加 10之前获取progressBar的实际% width ％

$("#increaseButton").click(function() { var $bar = $("#progressBar"); var $barParent = $bar.parent(); var perc = ~~($bar.width() * 100 / $barParent.width()); if(perc<100) $bar.css({ width : (perc+10) +"%" }); });

*{margin:0;} #progressBar{height:30px; background:red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="progressBar" style="width:50%"></div> <button id="increaseButton">INCREASE</button>

宽度增加10％？

2 个答案: