0

私はjQueryが初めてです。以下のコードでは、各サブヘッダーのページネーションを実行しようとしています。サブヘッダー 1 をクリックすると、ページにはサブヘッダー 1 のコンテンツのみが表示されます。すでに試して、必要なページ数を取得しました。インデックスを作成して取得しました。

ページネーションを作成するにはどうすればよいですか? 以下の場合のように、サブヘッダーが3つあるので「1,2,3」と表示させたい。1をクリックすると、サブヘッダー1のみが表示され、他のヘッダーは非表示になります。jQueryを使用してどのように行うことができますか?

<span>Click a Header!</span>
<div><h2>Sub Header 1</h2></div><div>Content 1</div>
<div><h2>Sub Header 2</h2></div><div>Content 2</div>
<div><h2>Sub Header 3</h2></div><div>Content 3</div>

$("h2").click(function () {
    // this is the dom element clicked
    var index = $("h2").index(this);
    var size = $("h2").size(this);
    $("span").text("That was Header index #" + index + "   Total Pages #" + size);
});

http://jsfiddle.net/userdude/GtDHW/

4

2 に答える 2

2

これはあなたが達成しようとしていることですか？

$("h2").click(function () {
    $("h2").not(this).parent().next().hide();
    $(this).parent().next().show();
});

説明：

  • H2クリックされたものを除くすべてのs を取得し、親 (DIVを含むH2) に移動し、次の要素 (コンテンツを含む) を取得し、コンテンツを含むDIVすべての を非表示にしますDIV
  • クリックした を取り、H2同様にトラバースし、DIVwith コンテンツが表示されていることを確認します
于 2012-06-18T11:50:20.913 に答える
2

これは、うまくいけば、より組織化されたアプローチで、あなたがやろうとしていることのようです。

テキスト（ニュース記事など）をチャンクしようとしている場合は、それをスムーズにするのに役立つプラグインがそこにあります. いくつかの調査を行い、必要なものに適したものを見つけるだけです.

いくつかの例は次のとおりです。

ページネーションはテーブルデータのページネーションも指し、程度の低いリストメイキングも指すことに注意してください。そのため、具体的であることを確認しようとするときは注意してください。そうしないと、奇妙な結果が見つかる可能性があります。また、必須ではありませんが、サーバーで何度もページネーションが発生することに注意してください。一部の「ニュー メディア」サイトでは、記事全体を読み込んでから、The Daily Beast のように画面を切り替えます。

HTML

<div id="msg">Click a Header to Show Associated Content</div>
<div class="story">
    <h2>Sub Header 1</h2>
    <div>Content 1</div>
</div>
<div class="story">
    <h2>Sub Header 2</h2>
    <div>Content 2</div>
</div>
<div class="story">
    <h2>Sub Header 3</h2>
    <div>Content 3</div>
</div>

CSS

.story > div {
    display: none;
}

jQuery

$(document).ready(function(){
    var $headers = $(".story h2"),
        $msg = $('#msg');

    $headers.click(function(){
        var $this = $(this),
            $content = $headers.not(this).siblings('div'),
            msg = "Select story #" + $this.text();

        $content.hide();

        $this.siblings('div').show();

        $msg.text(msg);
    });
});

http://jsfiddle.net/userdude/GtDHW/1/

于 2012-06-18T11:38:41.117 に答える