jquery - jQuery根据工具栏的选择更改容器中的内容

Question

这是我正在使用的屏幕截图：

应该发生的事情：默认情况下，社交提要设置为 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，它可以正常工作，但之后就失败了。

Answer 1

修改你的开关如下

// 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 .twitterFeed")将搜索.twitterFeed属于#socialFeed id 的子类的类。

Answer 2

它不起作用，因为您的UL标签有重复的 ID 值。在给定的 HTML 页面上，ID 应该是唯一的。

如果您从您ul的 's 中删除 ID 属性并编辑您的 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;
        }
    });