Question

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

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

<强> DEMO

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

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

<强> DEMO 即可。

Answer 2

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

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

DEMO http://jsfiddle.net/XQJFQ/

Answer 3

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

首先更改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');
});

Jquery单击功能，同一按钮显示不同的文本

3 个答案: