クリック時にテキストを変更して変更し続ける

Question

私は "Hey"でdivを持っています。それは "あなたは大丈夫ですか？"それをクリックすると。しかし、私はより多くのテキストを持ってcontiueしたい。また、それが可能

$(document).ready(function() { 
 
    $("#fold").click(function() { 
 
     $("#fold_p").text("Are you ok?"); 
 
    }) 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p><div id="fold"> 
 
    <p id="fold_p">Hey</p> 
 
</div>

です：私がクリックしたときに、「あなたはOKです」別のテキストが表示され、のように...

HTMLのように、どのように私はそれを作ることができます最後のテキストをリンクにするには？どんな助けも大歓迎です。 ありがとうございます

Answer 1

我々はjQueryならびにJavaScriptで両方の機能を実現することができます。

• 前回表示されたテキストをクリックすると動的にテキストが変更されます。
• リンクはJavaScript jQueryの

  var text = ["First","Second","Third","Fourth"] 
   
  
   
  var index = 0; 
   
  $("#fold").click(function() { 
   
      index++; 
   
      if(index < text.length) { 
   
      if(index == text.length-1) { 
   
      $("#fold_p").html('<a href="">'+text[index]+'</a>'); 
   
      } else { 
   
      $("#fold_p").text(text[index]); 
   
      } 
   
      } 
   
  })

  <div id="fold"> 
   
      <p id="fold_p">Hey</p> 
   
  </div>

  を使用して

  var text = ["First","Second","Third","Fourth"] 
   
  
   
  var index = 0; 
   
  document.getElementById("fold").onclick = function() { 
   
      index++; 
   
      if(index < text.length) { 
   
      if(index == text.length-1) { 
   
      document.getElementById("fold_p").innerHTML = '<a href="">'+text[index]+'</a>'; 
   
      } else { 
   
      document.getElementById("fold_p").innerHTML = text[index]; 
   
      } 
   
      } 
   
  }

  <div id="fold"> 
   
      <p id="fold_p">Hey</p> 
   
  </div>

  を使用して

として最後のテキスト

Answer 2

ここに行きます！単には、コメントに記載されているようなの配列を作成してください！

var text = ["Hi","One","Two","Three","Four"] 
 

 
$(document).ready(function() { 
 
    var index = 0; 
 
    $("#fold").click(function() { 
 
     index++; 
 
     $("#fold_p").text(text[index]); 
 
    }) 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p><div id="fold"> 
 
    <p id="fold_p">Hey</p> 
 
</div>

Answer 3

私は配列を使用して、吐き出すためのさまざまな宣伝文を持つために、配列をシフトするだろう。

$(document).ready(function() { 
 
    textList = ["Are you okay?", "Well that's cool.", "I like puppies"]; 
 
    $("#fold").click(function() { 
 
    $("#fold_p").text(textList.shift()); 
 
    }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p><div id="fold"> 
 
    <p id="fold_p">Hey</p> 
 
</div>