2

こんにちは eveyone クリック機能を使用しようとしています。ユーザーがボタンをクリックすると、2 番目のテキストが表示され、最初のテキストが表示されず、ユーザーが同じボタンをもう一度クリックすると、3 番目のテキストが表示され、2 番目のテキストが表示されます。最後にもう一度同じボタンをクリックすると、4 番目のテキストが表示され、3 番目のテキストは表示されません。これが私の機能です：

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

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

どういうわけか、どれが選択されているかを取得する必要があります。これで、すべてのテキストのみが表示されます。次に、最初の 1 つだけを非表示にします。

最初に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 に答える