現在の番号から次のボタンを続ける

Question

サイトの次のボタンを現在の番号から続行しようとしました。しかし、毎回1から始まります。私が助けてくれたどんな助けでも ここでは、pNextボタンをクリックすると、H1と段落を変更し、作成した8つのオプションの間でサイクルを繰り返すことになっています。

私は個々のアレイに直接リンクする2つのボタンがあります。 それで7番のボタン。それをクリックした後に次をクリックすると、8> 1> 2>に移動します。しかし、それは1に直接行く。

<!-- NEXT BUTTON --> 
    <script> 
     $(document).ready(function() { 
      var textArray = []; 
      textArray[0] = "market.';  
      textArray[1] = 'area.';  
      textArray[2] = 'involved.';  
      textArray[3] = 'solution.'; 
      textArray[4] = 'situation.';  
      textArray[5] = 'unit.';  
      textArray[6] = 'place.';  
      textArray[7] = 'parts.'; 

      var idx = 0; 
      $('#pNext').on('click', function(){ 
       idx++; 
       var newidx = idx % textArray.length; 
       $('#pText').text(textArray[newidx]); 
      }); 
     }); 

     $(document).ready(function() { 
      var textArray = []; 
      textArray[0] = 'Better';  
      textArray[1] = 'Better';  
      textArray[2] = 'Safer';  
      textArray[3] = 'Intuitive'; 
      textArray[4] = 'One';  
      textArray[5] = 'Better';  
      textArray[6] = 'Theft';  
      textArray[7] = 'Quality'; 

      var idx = 0; 
      $('#pNext').on('click', function(){ 
       idx++; 
       var newidx = idx % textArray.length; 
       $('#pHeadline').text(textArray[newidx]); 
      }); 
     }); 

     $(document).ready(function() { 
      var textArray = []; 
      textArray[0] = '1';  
      textArray[1] = '2';  
      textArray[2] = '3';  
      textArray[3] = '4'; 
      textArray[4] = '5';  
      textArray[5] = '6';  
      textArray[6] = '7';  
      textArray[7] = '8'; 

      var idx = 0; 
      $('#pNext').on('click', function(){ 
       idx++; 
       var newidx = idx % textArray.length; 
       $('#pNumber').text(textArray[newidx]); 
      }); 
     });     
    </script> 

Answer 1

ここに新しいコードがあります。それはあなたの要件ごとに正常に動作します。あなたのコード最初の増分でのアクセス率増分変数の後

$(function() { 
    var textArray = []; 
    textArray[0] = 'market.'; 
    textArray[1] = 'area.'; 
    textArray[2] = 'involved.'; 
    textArray[3] = 'solution.'; 
    textArray[4] = 'situation.'; 
    textArray[5] = 'unit.'; 
    textArray[6] = 'place.'; 
    textArray[7] = 'parts.'; 

    var idx = 0; 
    $('#pNext').on('click', function(){ 
    idx = idx == textArray.length?0:idx; 
     $('#pText').text(textArray[idx++]); 
    }); 
}) 

Answer 2

は、それはコードが（textArray[0] = "market.';を除く）私のために正常に見える1

$('#pNext').on('click', function(){ 
    var newidx = idx % textArray.length; 
    $('#pNumber').text(textArray[newidx]); 
    idx++; 
}); 

Answer 3

からスタート。フィドルをチェックしてください。

$(document).ready(function() { 
 
      var textArray = []; 
 
      textArray[0] = 'market.';  
 
      textArray[1] = 'area.';  
 
      textArray[2] = 'involved.';  
 
      textArray[3] = 'solution.'; 
 
      textArray[4] = 'situation.';  
 
      textArray[5] = 'unit.';  
 
      textArray[6] = 'place.';  
 
      textArray[7] = 'parts.'; 
 

 
      var idx = 0; 
 
      $('#pNext').on('click', function(){ 
 
       idx++; 
 
       var newidx = idx % textArray.length; 
 
       $('#pText').text(textArray[newidx]); 
 
      }); 
 
     }); 
 

 
$(document).ready(function() { 
 
      var textArray = []; 
 
      textArray[0] = 'Better';  
 
      textArray[1] = 'Better';  
 
      textArray[2] = 'Safer';  
 
      textArray[3] = 'Intuitive'; 
 
      textArray[4] = 'One';  
 
      textArray[5] = 'Better';  
 
      textArray[6] = 'Theft';  
 
      textArray[7] = 'Quality'; 
 

 
      var idx = 0; 
 
      $('#pNext').on('click', function(){ 
 
       debugger; 
 
       idx++; 
 
       var newidx = idx % textArray.length; 
 
       $('#pHeadline').text(textArray[newidx]); 
 
      }); 
 
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p id="pText"></p> 
 
<p id='pHeadline'></p> 
 
<button id='pNext'>Click</button>