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

Question

我正在使用 Jquery 制作互动故事，我的问题是，因为第一个文本加载到函数 scene1 上，单击按钮 .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

使用一些标志在它们之间切换

function scene1() {
  $("p").text("Hi! My name is Lombado");
  $('.slideBt1').click(function() {
    if (!this.toggle)
      $('p').text("Nice to meet you!").hide().fadeIn(1000);
    else
      $('p').text("what is your name").hide().fadeIn(1000);
    this.toggle = !this.toggle;
  });
}

$("p").text("Hi! My name is Lombado");
$('.slideBt1').click(function() {
  if (!this.toggle)
    $('p').text("Nice to meet you!").hide().fadeIn(1000);
  else
    $('p').text("what is your name").hide().fadeIn(1000);
  this.toggle = !this.toggle;
});

<!-- begin snippet: js hide: false -->

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

如果您想在到达最后一个文本后删除点击处理程序，

$("p").text("Hi! My name is Lombado");
var abc = function() {
  if (!this.toggle)
    $('p').text("Nice to meet you!").hide().fadeIn(1000);
  else {
    $('p').text("what is your name").hide().fadeIn(1000);
    $('.slideBt1').off('click', abc);
  }
  this.toggle = !this.toggle;
};
$('.slideBt1').on('click', abc);

<!-- begin snippet: js hide: false -->

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

Answer 2

您可以使用 jQuery 中的代码触发点击事件，如下所示：

function scene1 () {
   $("p").text("Hi! My name is Lombado");
   $('.slideBt1').trigger("click");
}

Answer 3

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

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

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>

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

Executing the next function in the same button

javascript

jquery

function

next