javascript - Jquery点击函数，同一个按钮显示不同的文字

Question

大家好，我正在尝试使用点击功能。当用户单击按钮时，将出现第二个文本，第一个文本将不显示，然后用户再次单击同一按钮，这次将出现第三个文本，第二个文本将出现将显示，最后再次单击同一按钮，将出现第四个文本，第三个文本不显示。这是我的功能:

$("#slider1next").click(function () {
    $(".text").css('display', '');
    $("#first_one").css('display','none');                   
});

这是 HTML

  <button id="slider1next" >Clickme</button>
  <p class="text" id="first_one">This is the first text</p>
  <p class="text" id="second_one" style="display:none">This is the second text</p>
  <p class="text" id="third_one" style="display:none">This is the third text</p>
  <p class="text" id="fourth_one" style="display:none">This is the four text</p>​

您还可以在那里看到http://jsfiddle.net/ganymedes/7kxAE/

Answer 1

$("#slider1next").click(function () {
    $(".text:visible").hide().next().show();
});

换句话说，每次点击，您 hide :visible文本，以及show next一个。

<强> DEMO 。

如果您想在到达最后一个 p 时循环回到第一个，请使用以下命令:

$("#slider1next").click(function () {
    var $next = $(".text:visible").hide().next();
    $next.length ? $next.show() : $(".text:first").show();
});

<强> DEMO 。 ​