Question

所以我创建了几个h2标签并将它们放在一个列表中，它们都是可点击的，当点击时它们会显示div中的内容。这很棒，但我希望以前的内容消失并被新内容取代。

这是按钮的样子;

    <div id="h2List">      
        <h2 id="reveal1">Who are the main characters?</h2>

        <h2 id="reveal2">The action takes place on</h2>

        <h2 id="reveal3">Space crafts include</h2>

        <h2 id="reveal4">What are those things??</h2>

        <h2 id="reveal5">When they're not flying their driving</h2>
    </div>

这是持有内容的div;

    <div id="h2Reveal">
                <ul class="hidden" id="listOfCharacters">
                </ul>
                <ul class="hidden" id="listOfPlanets">
                </ul>
                <ul class="hidden" id="spaceStuff">
                </ul>
                <ul class="hidden" id="things">
                </ul>
                <ul class="hidden" id="drive">
                </ul>
            </div>

最后这是我用来切换第二个div中的信息列表的jQuery;

    $("#reveal1").on("click", function () {
            $("#listOfCharacters").toggle();
        }
    );

    $("#reveal2").on("click", function () {
            $("#listOfPlanets").toggle();
        }
    );
    $("#reveal3").on("click", function () {
            $("#spaceStuff").toggle();
        }
    );
    $("#reveal4").on("click", function () {
            $("#things").toggle();
        }
    );
    $("#reveal5").on("click", function () {
            $("#drive").toggle();
        }
    );

我希望这是有道理的。

Answer 1

您可能希望使用toggleClass

$("#reveal1").on("click", function () {
            $("#listOfCharacters").toggleClass('hidden');
        }
    );

    $("#reveal2").on("click", function () {
            $("#listOfPlanets").toggleClass('hidden');
        }
    );
    $("#reveal3").on("click", function () {
            $("#spaceStuff").toggleClass('hidden');
        }
    );
    $("#reveal4").on("click", function () {
            $("#things").toggleClass('hidden');
        }
    );
    $("#reveal5").on("click", function () {
            $("#drive").toggleClass('hidden');
        }
    );

Answer 2

我同意使用toggleClass，但您可以通过引入从源ID到目标的映射来加强它并提高可维护性。

var mapping = {
    "reveal1": "#listOfCharacters",
    "reveal2": "#listOfPlanets",
    "reveal3": "#spaceStuff",
    "reveal4": "#things",
    "reveal5": "#drive"
};

$("h2").on("click", function(event) {
    $(mapping[event.target.id]).toggleClass('hidden');
});

根据按钮选择更改div中的内容

2 个答案: