解決方案響應按鈕調整百分比棒

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 +/-按鈕。然後將點擊事件添加到每個+/- 。

裏面的單擊事件，得到的屬性值（你設置+5或-5 HTML）

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