0

みなさん、こんにちは。テキストの非表示と表示を提供する「次へ」と「前へ」という2つのボタンがあります。私の最初のテキストは「1」のように表示される必要があります。前のボタンをクリックすると2になり、「4」と呼ばれる4つのテキストが表示されるまでもう一度押します。これがhtmlの部分です。

<button id="slider1next" >Next</button>
<br>
  <p class="text" id="first_one">1</p>
    <p class="text" id="second_one" style="display:none">2</p>
    <p class="text" id="third_one" style="display:none">3</p>
<p class="text" id="fourth_one" style="display:none">4</p>
<br>
<button id="slider2next" >Prev</button>​

次のボタンをもう一度押して、「1」と呼ばれる最初のテキストを表示したいのですが、前のボタンをクリックすると、前のテキストが表示されます。

これが私のスクリプトです

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

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

また、 http：//jsfiddle.net/ganymedes/scXQR/を見ることができます

4

1 に答える 1

2

次の方法でセレクターを使用してみてください。

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

これがあなたのコードの編集ですhttp://jsfiddle.net/scXQR/5/

お役に立てれば。

于 2012-10-21T11:30:46.177 に答える