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);
   }
 }
});

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

1 个答案: