javascript - 带有按钮和文本的 Jquery 单击函数

Question

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

我有另一个按钮，用户单击此按钮第四个文本将不显示，第三个文本将出现并再次单击此按钮第三个文本将不显示第二个文本将出现最后单击此按钮第二个将不显示第一个文本将出现。这是我的功能:

 $("#slider1next").click(function () {

         var $next = $(".text:visible").hide().next();
         $next.length ? $next.show() : $(".text:first").show();

 });

 $("#slider2next").click(function () {

         var $next = $(".text:visible").hide().next();
         $next.length ? $next.show() : $(".text:first").show();

 });

这是我的 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>

<br/>
<button id="slider2next" >Clickme</button>

你也可以在那里看到

http://jsfiddle.net/ganymedes/7kxAE/2/

请帮帮我

Answer 1

您可以使用prev 方法和:last 选择器:

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

$("#slider2next").click(function() {
    var $prev = $(".text:visible").hide().prev();
    $prev.length ? $prev.show() : $(".text:last").show();
});

http://jsfiddle.net/dq6rf/