使下一個按鈕繼續從當前的「數字」

我一直在試圖讓我的網站上的下一個按鈕繼續從當前的數字。但是每次都從1開始。任何幫助，我讚賞。所以這裏發生的是當我點擊pNext按鈕它應該改變一個H1和段落，並且在我創建的八個不同選項之間循環。使下一個按鈕繼續從當前的「數字」

我有幾個按鈕直接鏈接到每個單獨的數組。所以一個數字7按鈕。如果點擊了下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>

來源

2016-09-27 Calvarium

似乎在這裏工作 - https://jsfiddle.net/ezeqy5ff/4/ –

@ freedomn米宰我 – TheWandererr

你的代碼看起來它包含一些重複的部分，你可以至少作爲html部分發送？ – mondersky

這是一個新的代碼。它根據您的要求正常工作。

$(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++]); 
    }); 
})

來源

2016-09-27 13:32:34

嘿Akhil，對不起。我真的不明白。我對java很陌生。 – Calvarium

別擔心，那不是Java，而是Javascript。第一行和最後一行應該是可以理解的。第二行檢查索引（idx）是否小於textArray的長度（項目數）。如果索引較小，則將使用textArray中的下一個元素替換「#Headline」-Textcontent。（idx ++） – Sascha

但會停在最後一個項目。由於它是一個「下一個」按鈕，這是合理的，但不符合循環回到開頭的問題代碼。另外，如果對於每個文本/標題/數字重複此代碼3次，它將錯誤地跳轉。你能否提供所有3個部分的完整版本？ –

訪問索引增量變量之後，在代碼中第一個增量，然後它開始從1

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

來源

2016-09-27 13:33:44

請編輯更多信息。僅限代碼和「嘗試這個」的答案是不鼓勵的，因爲它們不包含可搜索的內容，也不解釋爲什麼有人應該「嘗試這個」。 – abarisone

代碼看起來對我很好（除textArray[0] = "market.';）。請檢查小提琴。

$(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>

來源

2016-09-27 13:44:46

使下一個按鈕繼續從當前的「數字」

回答

相關問題