Javascript或jquery,当按下按钮时,如何显示数组中的文本并将文本更改为数组中的下一段文本?

时间:2014-05-16 05:43:00

标签: javascript jquery html

我有一个包含13个项目的数组,所有这些都是文本。我可以使用。

显示数组中的文本
document.write(arrayname["0"]);

但是我希望用户单击一个按钮并淡出当前数组项并加载到下一个数组项中。我想让用户无法查看小于0且大于13的数组项,因为这会导致错误。

我试过这个,但无法让它发挥作用。

提前谢谢。

<script type=text/javascript>

 var stuff=['item', 'stuff', 'thingamajig'];
 var counter=0;
 function goRight(){
    if(counter===13){
      counter=13;
    } else 
     { counter=counter+1 }
 }

 document.write(stuff[counter]);
</script>

 <img src="left.png"><img onclick="goRight(); src="right.png>

3 个答案:

答案 0 :(得分:1)

你最大的困惑之源可能是因为你的功能中没有写任何东西。尝试这样的事情:

<script type=text/javascript>
  var stuff=['item', 'stuff', 'thingamajig'];
  var count = 0;

  function goRight() {

    if (count > stuff.length - 1)
      count = 0;

    document.write(stuff[count++]);

  }

  document.write(stuff[count]);
</script>


<img src="left.png"><img onclick="goRight(); src="right.png>

答案 1 :(得分:0)

Fiddle Demo

试试这个

var stuff=['item', 'stuff', 'thingamajig'];
     var counter=0;

     function goRight(){
        document.write(stuff[counter]);
         counter++;
         if(counter===13){  // if You want 13 th element you check to 14
         counter=0;
         }
      }        

OR

var stuff=['item', 'stuff', 'thingamajig'];
     var counter=-1;
     goRight();

function goRight(){

         if(counter===13){
         counter=0;
         }else{
         counter++;
         }
        }      

   document.write(stuff[counter]);

答案 2 :(得分:0)

尝试这样的事情 HTML

<span id='dynamicText'>item</span>
<button type='button' onclick='goRight()'>Click</button>

SCRIPT

var stuff = ['item', 'stuff', 'thingamajig'];
var counter = 1;
function goRight() {
 if(counter>= stuff.length)
    counter=0;
 document.getElementById('dynamicText').innerHTML=stuff[counter];
 counter++;
}

JSFiddle Demo

您可能需要阅读Why Using document.write is a considered a bad practive