javascript - 在同一个按钮中执行下一个功能

Question

我正在使用 Jquery 编写交互式故事，我的问题是，因为 第一个文本加载到功能场景 1 上，单击按钮 .slideBt1 后，如何通过同一个按钮执行第二个文本功能，像下一个按钮一样工作？

function scene1 () {
$("p").text("Hi! My name is Lombado");

//1st text
$('.slideBt1').click(function(){
$('p').text("Nice to meet you!").hide().fadeIn(1000);
});

//2nd text
$('.slideBt1').click(function(){
$('p').text("what is your name").hide().fadeIn(1000);
});

Answer 1

您可以将需要显示的文本放在一个数组中，然后点击按钮显示数组的下一个元素，而不是进行不同的点击。

如果您在故事的不同点需要不同的 Action /动画，那么您也需要将动画存储在您的数组中。

var story = ["Nice to meet you!", "what is your name", "Other sentence...", "Yet another sentence"];
var clickCount = 0;

$("p").text("Hi! My name is Lombado");

var nextStatment = function() {
  $('p').text(story[clickCount]).hide().fadeIn(1000);
  clickCount++;
  //Here you might need to reset the count to 0, if it exceeds the array size.
};

$('.slideBt1').on('click', nextStatment);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p></p>
<button class="slideBt1">click</button>