0

ブートストラップの github ページと、下にスライドして記事のすべてのタイトルを含むサイドバーを処理する方法を見てきました。

私は、各アンカーポイントを手動で入力してリンクを作成している現在のシステムに基づいて構築する方法を考えようとしています.

現在、私は持っています

<h1>Main Title</h1>
<a href="#Para5" class="scroll">Para5</a>
<a href="#Para10" class="scroll">Para10</a>
<a href="#Para15" class="scroll">Para15</a>
<a href="#Para20" class="scroll">Para20</a>
<br/>
<h2>Para1</h2>
     <p>.....</p>
<h2>Para2</h2>
     <p>.....</p>
<h2>Para3</h2>
     <p>.....</p>
<h2>Para4</h2>
     <p>.....</p>
<h2>Para5</h2>
     <p>.....</p>
etc...

次に、そのような見出しのIDを手動で追加する必要があります.5つの見出しごとにリンクと、ページのすべての見出しを表示する「すべて表示」というボタンを設定することを目指しています.

HTML 埋め込みテキスト エディタを使用して入力されるページを作成すると、コードは非表示になり、MySQL データベースに保存されます。

見出しと段落、そしてメイン ページのタイトルを入力して、リンクをメイン タイトルの下のページに動的に挿入したいだけです。

  1. h2 と /h2 の間のテキストをキャプチャし、リンクと ID を作成します。ページ上のすべての h2 に対してこれを行います。

PHP によって作成されたページからこのような情報を取得する方法は、一生考えられません。

ページの処理は、jQuery と Javascript を使用してポストで、または PHP で事前に行うことができます。

PHPで物事を行うことを好みます。

5番目の要素のことを無視します。

<h1>Main Title</h1>
<div id="paraNav">
</div>
<br/>
<div id="headings">
<h2>Para1</h2>
     <p>.....</p>
<h2>Para2</h2>
     <p>.....</p>
<h2>Para3</h2>
     <p>.....</p>
<h2>Para4</h2>
     <p>.....</p>
<h2>Para5</h2>
     <p>.....</p>
</div>

目的は、次のような見出しのテキストを取得することです。

$('#headings h2').each(function(i,$el){
    var headingTitle = $el.text;  **  
      document.write('<a href="#headingTitle" class="scroll">headingTitle</a>')
    $('h2').append.attr({
         'id':headingTitle
    });
});

**このビットが存在するかどうかはわかりません。(タグ間のコンテンツ/値/テキストを取得)

4

2 に答える 2

0

おそらくjQueryでこれを行うことができます。

これは簡単で汚いですが、おそらく始めることができます。私はこれをテストしていません。構文エラーがある可能性があります。

var linkArray = [];

$('h2:nth-child(5)').each(function () {
    linkArray.push({
        text: $(this).text,
        // href: $(this).id
    });
});

for (var i = 0; i < linkArray.length; i++) {
    $('#linkcontainer').append('<a href="' + linkArray[i].text + '">' + linkArray[i].text + '</a>');
}
于 2013-03-15T15:12:17.810 に答える
0

jQuery には、やりたいことを実行するための優れたツールがいくつかあると思います。PHPでやろうとすると雑な仕事になるかもしれませんが、jQueryでは数行でできます。何かのようなもの

$('#content h2:nth-of-type(5n)').each(function(i,$el){
    ver headingId = $el.attr('id');
    $('#contentNav').append(
        $('<a/>').html(headingId).attr({
            'href':'#'+headingId,
            'class':'scroll'
        })
    );
});
于 2013-03-15T15:14:45.597 に答える