2

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

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

4

3 回答 3

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

换句话说，每一次点击，你都会hide得到:visible文本和show文本next。

演示。

如果您想在到达最后一个时循环回到第一个p，请改用以下内容：

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

演示。​</p>

于 2012-10-20T13:49:20.087 回答
1

为了恢复到开始，您需要检查是否有next其他使用第一个。toggle()方法将反转元素的显示

$("#slider1next").click(function() {
    var $curr= $('.text:visible');
    var $next= $curr.next().length ? $curr.next() : $('.text').first()
    $curr.add( $next).toggle();  
});

演示 http://jsfiddle.net/XQJFQ/

于 2012-10-20T13:57:44.987 回答
0

你必须以某种方式选择哪一个。现在您只显示所有文本。然后只隐藏第一个。

首先更改html的第一个元素。您不需要定义 id。文本类就足够了。

<p class="text active">This is the first text</p>

然后改变你的点击功能

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

    // get current
    var cur = $('.text.active').index('.text');

    // calculate next
    var next = cur+1 % $('.text').length();

    // hide all
    $(".text").hide();

    // show next
    $($('.text')[next]).show();

    // update active
    $('.text.active').removeClass('active');
    $($('.text')[next]).addClass('active');
});
于 2012-10-20T13:57:35.897 回答