Question

我有＆＃34;嘿嘿＆＃34;。那变成了＃34;你还好吗？＆＃34;当我点击它。但我想继续发表更多文章。如何点击＆＃34;你还好吗？＃34;出现另一个文本，依此类推......

HTML：

＆＃13;

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

＆＃13;

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

＆＃13;

此外，是否可以将最后一个文本作为链接？任何帮助深表感谢。谢谢

Answer 1

你走了！只需创建数组，如评论中所述！

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 2

我使用数组，然后移动数组，以便有不同的模糊来吐出。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

我们可以在jQuery以及JavaScript中实现这两项功能。

点击之前显示的文字时动态文字更改。
最后一个文字作为链接

使用JavaScript

＆＃13;

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];
    }
  }
}

＆＃13;

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

＆＃13;

使用jQuery

＆＃13;

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

＆＃13;

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

＆＃13;

点击更改文字并不断更改

3 个答案: