Question

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

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

 $("#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/

Jquery单击按钮和文本功能

1 个答案: