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

【问题标题】：Bootstrap Progress Bar: add to the css: width value, all in coffeescript / jQueryBootstrap 进度条：添加到 css:width 值，全部在 coffeescript / jQuery
【发布时间】：2015-03-25 06:09:11
【问题描述】：

我正在尝试使每次按下按钮时，进度条都会在 100% 中增加额外 12.5%。（所以八次点击将使条形加起来达到 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")

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

导轨部分

<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>

【问题讨论】：

标签： jquery css ruby-on-rails twitter-bootstrap coffeescript

【解决方案1】：

终于明白了：

导轨部分

<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")

【讨论】：