0

HTML / JavaScript / jQueryのみを使用して、サーバー側のスクリプト/言語を使用せずにWebサイトを構築しました。

私のウェブサイトには、私が保持しているプレーンなstream.htmlページがあります（css、フォーマットなどはありません）

<html>
<head>
</head>
<body>
<div id="textParagraphs">
<p>Para 1</p>
<p>Para 2</p>
<p>Para 3</p>
<p>Para 4</p>
</div>
</body>
</html>

私が持っている他のすべてのhtmlページ（divs / formating / cssなど）では、ページから上位3つのセクションをピックアップ<p>し、回転効果でそれらを表示するセクションをヘッダーに保持するつもりです。例：isに3つの段落がある場合、Para1->フェードアウト->Para2->フェードアウト->Para3と表示されます。

<p>別のページからセクションをプルしてここに表示するにはどうすればよいですか？

4

3 に答える 3

2

代わりに、これらの段落をJSONとして保存することをお勧めします。

$.getJSON()次に、HTMLドキュメントを解析する代わりに、jqueryを使用して各ページからそれらをリクエストできます。stream.htmlファイルを維持したい場合は、上位3つだけを処理するのではなく、JSONをフェッチしてすべてを出力することができます。

ここで例を確認してください：http：//api.jquery.com/jQuery.getJSON/

（3）アイテムのリストを取得したら、カルーセル（google for carousel javascript）を設定できます。これを行うためのスクリプトやjQueryプラグインはたくさんありますので、気に入ったものを見つけてください。

于 2012-12-24T04:55:49.807 に答える
1

基本的には、関数を使用してそのhtmlページのコンテンツを取得できますjQuery.get()。<p>次に、結果で。を使用してタグを検索する必要がありますjQuery(result).find("p")。これでタグの配列ができたので、次の簡単なスクリプトpを使用してローテーションできます。carousel

var carousel = {
    _defaultParameters: {
        container: null,
        paragraphs: [],
        timeout: 3000,
        nextItemIndex: 0
    },

    rotate: function(param){
        var param = $.extend(true, {}, this._defaultParameters, param);

        if(param.paragraphs.length == 0) return;
        if(param.nextItemIndex > param.paragraphs.length - 1){
            param.nextItemIndex = 0;
        }

        param.container.empty().append(param.paragraphs[param.nextItemIndex]);

        param.nextItemIndex++;
        setTimeout(function(){ carousel.rotate(param); }, param.timeout);
     }
}

$(function(){

    jQuery.get('data_source.html', function(result) { // replace data_source.html with your external html file url
        var paragraphs = jQuery(result).find("p");

        carousel.rotate({
            container: $("#rotatorContainerID"), //replace this with your container
            paragraphs: paragraphs
        });
    });

});

'data_source.html'その<p>タグを含む外部htmlファイルのアドレスに置き換えます。また、タグをホストする要素container: $("#rotatorContainerID")のをに変更すると、その中で回転が発生します。id<p>

機能をデモするには、次のcarouselフィドルを確認できます：http: //jsfiddle.net/5AgcE/4/

于 2012-12-24T05:06:39.330 に答える
-2

これが最も簡単な方法です。

var allPs = $('p');

var p1 = $(allPs[0]).html();

var p2 = $(allPs[1]).html();

var p3 = $(allPs[2]).html();

次のようなテストを追加することもできます。

if(allPs.length >= 3) {

}
于 2012-12-24T05:01:39.523 に答える