0

ここに私が取り組んでいるもののスクリーンショットがあります:

ここに画像の説明を入力

想定される動作:デフォルトでは、ソーシャル フィードは Twitter ストリームに設定されています。ユーザーがツールバーから他のストリームをクリックすると、下のコンテンツが他のコンテンツに切り替わります。表示されているものを切り替える方法がよくわかりません。

これが私のjQueryです：

$(function() {
    // Sets the default stream to Twitter and selects it in the toolar
    $("#feedFilter li").first().addClass("selected");
    $("#socialFeed .twitterFeed").show();

    $("#feedFilter li").click(function() {
        // Clears the white background on the toolbar selection
        $(this).parent().find("li").removeClass("selected");

        // Toggles the white background on the toolbar selection
        $(this).toggleClass("selected");

        // Clears out all socialFeed lists
        $("#socialFeed").fadeOut();

        // Gets the index of the stream selected in the toolbar and shows the stream
        var x = $(this).index();
        switch(x) {
            case 0: $("#socialFeed .twitterFeed").fadeIn(); break;
            case 1: $("#socialFeed .facebookFeed").fadeIn(); break;
            case 2: $("#socialFeed .newsFeed").fadeIn(); break;
            case 3: $("#socialFeed .linkedInFeed").fadeIn(); break;
        }
    });

階層を確認できるように、ここに私のコードを示します。

[...]

<div class="containerSubHeader">
    <ul id="feedFilter">
        <li>Twitter</li>
        <li>Facebook</li>
        <li>Google News</li>
        <li>LinkedIn</li>
    </ul>
</div>
<div class="mainContainer grad-lt-grey">
    <ul id="socialFeed" class="twitterFeed">
        <?php
            [Gets the Twitter content here and puts in <li> items]
        ?>
    </ul>
    <ul id="socialFeed" class="facebookFeed">
        <?php
            [Gets the Facebook content here and puts in <li> items]
        ?>
    </ul>
    <ul id="socialFeed" class="newsFeed">
        <?php
            [Gets the Google News content here and puts in <li> items]
        ?>
    </ul>
    <ul id="socialFeed" class="linkedInFeed">
        <?php
            [Gets the LinkedIn content here and puts in <li> items]
        ?>
    </ul>
</div>

[...]

これは機能していませんが、私の問題が何であるかわかりません。代わりにそれを行うより良い方法はありますか？jQuery を使用して正しい PHP を順不同のリスト タグに追加するだけですが、それは面倒になり、これは「簡単」に思えました (またはそう思った)。

何か助けはありますか？

これがライブ サイトです。Facebook に切り替えると緩く動作することがわかりますが、その後は失敗します。

4

2 に答える 2

2

次のようにスイッチを変更します

// Gets the index of the stream selected in the toolbar and shows the stream
        var x = $(this).index();
        switch(x) {
            case 0: $(".twitterFeed").fadeIn(); break;
            case 1: $(".facebookFeed").fadeIn(); break;
            case 2: $(".newsFeed").fadeIn(); break;
            case 3: $(".linkedInFeed").fadeIn(); break;
        }

セレクターは、#socialFeed id の子で$("#socialFeed .twitterFeed")あるクラスを検索します。.twitterFeed

于 2013-01-08T18:37:46.050 に答える
1

ULタグの ID 値が重複しているため、機能していません。特定の HTML ページでは、ID は一意である必要があります。

からID属性を削除しulてJavaScriptを編集すると、機能するはずです。ID socialfeed を削除し、ここにクラスとして追加しています。

   <ul class="socialFeed twitterFeed">
        <?php
            [Gets the Twitter content here and puts in <li> items]
        ?>
    </ul>
    <ul class="socialFeed facebookFeed">
        <?php
            [Gets the Facebook content here and puts in <li> items]
        ?>
    </ul>
    <ul class="socialFeed newsFeed">
        <?php
            [Gets the Google News content here and puts in <li> items]
        ?>
    </ul>
    <ul class="socialFeed linkedInFeed">
        <?php
            [Gets the LinkedIn content here and puts in <li> items]
        ?>
    </ul>

jquery で、ID の代わりにクラスを使用するようにセレクターを変更しました。

$(function() {
    // Sets the default stream to Twitter and selects it in the toolar
    $("#feedFilter li").first().addClass("selected");
    $(".socialFeed.twitterFeed").show();

    $("#feedFilter li").click(function() {
        // Clears the white background on the toolbar selection
        $(this).parent().find("li").removeClass("selected");

        // Toggles the white background on the toolbar selection
        $(this).toggleClass("selected");

        // Clears out all socialFeed lists
        $(".socialFeed").fadeOut();

        // Gets the index of the stream selected in the toolbar and shows the stream
        var x = $(this).index();
        switch(x) {
            case 0: $(".socialFeed.twitterFeed").fadeIn(); break;
            case 1: $(".socialFeed.facebookFeed").fadeIn(); break;
            case 2: $(".socialFeed.newsFeed").fadeIn(); break;
            case 3: $(".socialFeed.linkedInFeed").fadeIn(); break;
        }
    });
于 2013-01-08T18:40:07.293 に答える