Bootstrap进度条：添加到css:宽度值，全部在coffeescript/jQuery

Question

我试图做到这一点，以便每次按下按钮时，进度条都会添加额外 12.5%（满分 100%）。（所以点击 8 次将使条形加起来达到 100%）

目前添加文字，不移动进度条

到目前为止的代码：

咖啡脚本

$(".mybtn").on 'click', (e) ->
    valuer = $("#progBarMsg").parent().attr('value')
    newVal = valuer + 12.5
    e.preventDefault()
    window.scrollTo(0, 0)
    $("#progBarMsg").parent().css("width", newVal+'%').attr('aria-valuenow', newVal)
    $("#progBarMsg").text("This is a test")

这是部分视图，仅显示进度条和按钮：

rails部分

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="12.5" aria-valuemin="0" aria-valuemax="100" style="width: 12.5%;">
    <span id="progBarMsg">Step 1 of 8</span>
  </div>
</div>

<nav>
    <ul class="pager">
        <li class="mybtn"><a href="">Click to Fill Progress Bar</a></li>
    </ul>
</nav>

Answer 1

终于明白了：

rails部分

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="12.5" aria-valuemin="0" aria-valuemax="100" style="width: 12.5%;">
    <span id="progBarMsg">Step 1 of 8</span>
  </div>
</div>


<nav>
    <ul class="pager">
        <li class="myBtn"><a href="">Hit button to add to Progress</a></li>
    </ul>
</nav>

咖啡脚本

$(".myBtn").on 'click', (e) ->
    valuer = $("#progBarMsg").parent().attr('aria-valuenow')
    newVal = Number(valuer) + 12.5
    e.preventDefault()
    window.scrollTo(0, 0)
    $("#progBarMsg").parent().css("width", newVal+'%').attr('aria-valuenow', newVal)
    $("#progBarMsg").text("This is a test")

Bootstrap进度条：添加到css:宽度值，全部在coffeescript/jQuery

Bootstrap Progress Bar: add to the css: width value, all in coffeescript / jQuery

css

jquery

ruby-on-rails

coffeescript

twitter-bootstrap