javascript - 单击箭头将 5 个按钮的内容更改 +1 值

Question

我有这个 HTML 代码:

<div class="container_p pull-right" id="container_p">
<button type="button" class="btn_p pull-right" id="naglowek_p_zwiniety">P</button>
<div class="btn-group-vertical pull-right hide" role="group" id="grupa_p">

  <button type="button" class="btn_strzalka btn_strzalka_gora_p border_top" id="strzalka_gora_p">
    <span class="glyphicon glyphicon-chevron-up"></span>
  </button>
  <button type="button" class="btn_litery_p btn_wspolne border_bottom" value="0" id="p0">0</button>
  <button type="button" class="btn_litery_p btn_wspolne border_bottom" value="1" id="p1">1</button>
  <button type="button" class="btn_litery_p btn_wspolne border_bottom" value="2" id="p2">2</button>
  <button type="button" class="btn_litery_p btn_wspolne border_bottom" value="3" id="p3">3</button>
  <button type="button" class="btn_litery_p btn_wspolne" value="4" id="p4">4</button>
  <button type="button" class="btn_litery_p btn_wspolne" value="5" id="p5">5</button>
  <button type="button" class="btn_strzalka btn_strzalka_dol_p border_top"  id="strzalka_dol_p">
    <span class="glyphicon glyphicon-chevron-down"></span>
  </button>
  <button type="button" class="btn_p_top btn_p" id="naglowek_p">P</button>
</div>
</div>

还有这个 JS 脚本:

var liczba_p = ['0','1','2','3','4','5','6','7','8','9','10','11','12'];
var liczba_przyciskow = ['0','1','2','3','4','5'];
  var licz = 0;
  var liczenie = 0;
  var j = 0;
   $('#strzalka_gora_p').click(function(){
     for (var i = 0; i<liczba_p.length;i++)
     {
      if (j == liczba_przyciskow.length)
      {
        j=0;
      }
      licz = licz+1;
      if (licz == liczba_p.length)
      {
       licz = licz -1;   
       document.getElementById('strzalka_gora_p').disabled=true;
      }

 document.getElementById("p"+liczba_przyciskow[j]).innerHTML=liczba_p[licz];
         j++;
     }

document.getElementById("p"+liczba_przyciskow[liczenie]).innerHTML = licz+1;
  })

 $('#strzalka_dol_p').click(function(){
   for (var i =0; i<liczba_przyciskow.length;i++){
   if (i==liczba_przyciskow.length){i=0;}else{
     licznik = Number(licznik)-1;
     tab_licznik_p[i]=licznik;
     document.getElementById("p"+liczba_przyciskow[i]).innerHTML = tab_licznik_p[i];
     document.getElementById("p"+liczba_przyciskow[i]).value = tab_licznik_p[i];
   }
   }
})

现在它起作用了，当我点击向上箭头时，值从:0|1|2|3|4|5 到 1|2|3|4|5|6 但在再次单击后它们变为 7|8|9|10|11|12。我应该如何编写 JS，以便每次单击时单击向上箭头都会添加 +1，第一次单击后我将得到:1|2|3|4|5|6，然后再单击 |2|3|4|5| 6|7 等网站上的按钮数量始终为 5

Answer 1

Try JSFiddle

$('#strzalka_gora_p').click(function() {
 var firstBtnVal = Number($('#grupa_p button[value="0"]').text());
 if (firstBtnVal >= 1) {
   for (var i = 0; i < 6; i++) {
     var btnVal = Number($('#grupa_p button[value="' + i + '"]').text());
     $('#grupa_p button[value="' + i + '"]').text(btnVal - 1);
   }
 }
});

$('#strzalka_dol_p').click(function() {
  var lastBtnVal = Number($('#grupa_p button[value="5"]').text());
  if (lastBtnVal < 12) {
   for (var i = 0; i < 6; i++) {
     var btnVal = Number($('#grupa_p button[value="' + i + '"]').text());
     $('#grupa_p button[value="' + i + '"]').text(btnVal + 1);
   }
 }
});