调整百分比栏的响应按钮的解决方案[关闭]答案

【问题标题】：Solution for Responsive button that Adjust Percentage bar [closed]调整百分比栏的响应按钮的解决方案[关闭]
【发布时间】：2017-06-17 01:23:34
【问题描述】：

我是 PHP 初学者。我自己使用 w3 模板和 CSS 来做这件事，问题是我想用按钮做，这样当我点击它时，它会上下调整百分比条。对此的任何解决方案，将不胜感激

【问题讨论】：

标签： javascript php jquery html css

【解决方案1】：

一个简单的例子让你开始，添加一个新类btn_pro 到 +/- 按钮。然后为每个 + / - 添加点击事件。

在点击事件中，获取属性值（在 HTML 中设置 +5 或 -5）

+pb 之前的+ 将强制字符串/文本变为数字类型。

if (newpb >= 0 && newpb <= 100)更新进度条，防止低于0%或大于100%

自己更新样式，比如 0% 等。

$('.btn_pro').on('click', function() {
  var change = $(this).attr('value');
  var pb = $('#progressbar > span').text();
  var newpb = +pb + +change;
  if (newpb >= 0 && newpb <= 100) {
    //update newpb now
    $('#progressbar > span').text(newpb);
    $('#progressbar').css('width', newpb + '%');
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://www.w3schools.com/lib/w3.js"></script>


<p class="w3-large"><b><i class="fa fa-asterisk fa-fw w3-margin-right w3-text-teal"></i>Skills</b></p>
<p>Python</p>
<a class="w3-button w3-medium w3-circle w3-medium btn_pro" style="z-index:0" value="5">+</a>
<a class="w3-button w3-medium w3-circle w3-medium w3-margin-right btn_pro" style="z-index:0" value="-5">-</a>
<div class="w3-light-grey w3-round-xlarge w3-small">
  <div id="progressbar" class="w3-container w3-center w3-round-xlarge w3-teal" style="width:30%"><span>30</span>%</div>
</div>

【讨论】：

非常感谢。真的很有帮助