2016-04-09 12 views
0

+1値で5つのボタンの内容を変更します。クリックして、私は、この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]; 
    } 
    } 
}) 

それは私がarrow-をすることをクリックした作品値は 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

+0

であるあなたがPRODで使用するこの本当の変数名ですか? –

+0

あなたはこれのためのjsのバイブルを提供できますか?デバッグするのは簡単でしょうか?変数のこの種の名前は、流れを理解することは本当に難しい –

+0

このコードの多くは、質問に必要ですか?あなたが "余分な"コード –

答えて

0

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); 
    } 
} 
}); 
関連する問題