使下一个按钮继续从当前的“数字”

我一直在试图让我的网站上的下一个按钮继续从当前的数字。但是每次都从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

使下一个按钮继续从当前的“数字”

回答

相关问题