响应按钮的解决方案，调整百分比条

Question

 <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 " style="z-index:0">+</a>
        <a class="w3-button w3-medium w3-circle w3-medium w3-margin-right " style="z-index:0">-</a>
      <div class="w3-light-grey w3-round-xlarge w3-small">
        <div class="w3-container w3-center w3-round-xlarge w3-teal" style="width:30%">30%</div>
      </div>

我是初学者PHP。我使用w3模板和CSS自己做这个，问题是我想用按钮做，所以当我点击它会上下调整百分比栏（例如：每次点击+ 5％或-5 ％）但我几乎不了解jquery和javascript（我想成为一个后端，现在专注于PHP和Python）。任何解决方案，一个小提示将不胜感激 P / S：抱歉我的英语不好

Answer 1

一个简单的示例，帮助您入门，添加了一个新的类btn_pro到+/-按钮。然后在每个+ / - 。

上添加点击事件

在click事件中，获取属性值（在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>