0

（私は可能な限り説明します。コメントでさらに情報が必要な場合はお知らせください）

こんにちは！

私はjQueryが何であるか、それが何をするのかわかりません.SOの人は、私が何をすべきかを教えてくれました。

これがやりたいことです：

私は5つの異なる文を持っています.これらを例として使用しましょう:

  • 文01
  • 文 02
  • 文 03
  • 文04
  • 文05

私がやりたいことは、一度に 1 つの文を表示することです。ユーザーが次のボタンを押すと、次の文が表示され、最初の文が非表示になり、ユーザーがもう一度次のボタンを押すと、3 番目の文が表示され、2 番目の文が非表示になります。

つまり、次のボタンが次の文がある別のページにリンクしてはいけません。

前のボタンも必要です。ユーザーが 2 番目の文を見ていて、最初の文に戻りたい場合。

文だけでなく、任意の html コードを入力できる必要があることに注意してください。例として使用しました。

そして、さらに HTML コード (文 6 など) を追加したい場合は、HTML ファイルに追加するだけで、もう一度 [次へ] をクリックすると、ポップアップが表示され、さらに何かを追加するたびに jQuery を変更する必要はありません。の。

jQuery ではこれらすべてを実行できないと思われる場合は、その方法を教えてください。ありがとう...これは少し多すぎることを知っています.ボランティアが私を助けたいと思うなら、それは非常に光栄です.

4

3 に答える 3

1

次のようなコンテンツスライダーjQueryプラグインを使用できます

http://bxslider.com/

使い方は簡単

html

<ul class="bxslider">
  <li>My text 1</li>
  <li>Text 2</li>
  <li>text3</li>
  <li>Another text</li>
</ul>

jQuery 

$(document).ready(function(){
  $('.bxslider').bxSlider();
});

もちろんjQueryベースです

于 2013-06-06T05:31:05.967 に答える
0

これが可能な解決策です。

次のような HTML があるとします。

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="mystyles.css" />
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script type="text/javascript" src="myscript.js"></script>
  </head>
  <body>
    <input type=button id=prevBtn value="Prev" />
    <input type=button id=nextBtn value="Next" />
    <div id=sentences>
      <p>Sentence 1</p>
      <p>Sentence 2</p>
      <p>Sentence 3</p>
      <p>Sentence 4</p>
      <p>Sentence 5</p>
    </div>
  </body>
</html>

そして、「現在」のクラスを持っていない限り、すべての文を非表示にする CSS (mystyles.css):

#sentences * {
    display: none;
}
#sentences .current {
    display: inline;
}

次に、このコードはあなたが望むことを行います（myscript.js）：

jQuery(function($) {
    $('#sentences *').eq(0).addClass('current'); // start by showing the first sentence
    $('#nextBtn, #prevBtn').click(function() {
        var currItem = $('#sentences .current');
        var newItem = ($(this).attr('id') == 'nextBtn') ? currItem.next() : currItem.prev();
        if (newItem.size() > 0) {
            currItem.removeClass('current');
            newItem.addClass('current');
        }
    });
});

current基本的に、リストの最初の項目にクラスを与えることから始めます。次に、現在のアイテムを見つけて、押されたボタンに応じてまたは
のいずれかを移動するクリック ハンドラーを取得します。その結果、有効なアイテムが得られた場合 (リストの最初/最後ではない場合)、現在のアイテムからクラスを削除し、見つかった新しいアイテムに追加します。next()prev()current

このソリューションのフィドルはこちら: http://jsfiddle.net/39CYu/

于 2013-06-06T05:41:15.963 に答える