Question

我在让小脚本正常工作时遇到问题，并且只是在寻找一些指导。我试图这样做，以便当我点击立法者的名字时，它会在他们的名字下面显示关于他们的更多信息。如他们的党和区。但是，当我点击一个名字时，它只会在立法者名称下面发布更多列表项目。我对编程非常陌生，而且我有点不知道该怎么做。有什么建议？如果有帮助，我正在使用Sunlight Congress API。

这是HTML

<body>
    <h1>Find your local legislators</h1>

    <form id="get-zip">
        <label for="zip">Enter your Zip code:</label>
        <input id="zip" type="text">
        <button type="submit">Look up</button>
    </form>

    <ul id="legislators"></ul>

</body>

和JavaScript

    $(function(){
    $("form#get-zip").submit(function(){
        var zip = $("input#zip").val();
        $.get("http://congress.api.sunlightfoundation.com/legislators/locate?apikey=PUT-YOUR-API-KEY-HERE&zip=" + zip)
        .done(function(responseJSON){
            responseJSON.results.forEach(function(legislator){
                $("ul#legislators").append("<li>" + legislator.first_name + " " + legislator.last_name + " (" + legislator.chamber + ")</li>");
                $("ul#legislators").click(function(){
                    $("ul#legislators").append("<li>" + legislator.party + " " + legislator.district + "</li>").toggle();
                });
            });
        });
        return false;
    });
});

Answer 1

我建议您在forEach循环中创建li元素时添加每个立法者的详细信息，但是将要查看的部分放在单独的子元素中。所以动态创建的li元素看起来像这样：

<li>
    <p>Juanita Johansson (Senate)</p>
    <p class='details'>JavaScript Party Canberra</p>
</li>

然后在样式表中添加details类，默认隐藏辅助详细信息：

.details { display : none; }

请注意，然后可见性不是您可以单独为细节设置样式的东西 - 您也可以将它们放在较小的字体或其他任何内容中。

然后，您可以将基于该类切换的ul元素添加委派的单击处理程序：

$(function(){
    $("#legislators").on("click", "li", function(){
         $(this).find("p.details").toggle();
    });
    $("#get-zip").submit(function(){
        var zip = $("#zip").val();
        $.get("http://congress.api.sunlightfoundation.com/legislators/locate?apikey=PUT-YOUR-API-KEY-HERE&zip=" + zip)
        .done(function(responseJSON){
            responseJSON.results.forEach(function(legislator){
                $("#legislators").append(
                    "<li><p>" + legislator.first_name + " " + legislator.last_name +
                    " (" + legislator.chamber +
                    ")</p><p class='details'>" +legislator.party + " " +
                    legislator.district + "</p></li>"
                );
            });
        });
        return false;
    });
});

关于您正在使用的选择器的一般说明：如果按ID选择，您只需说$("#idHere")，就不需要先包含标记名。

单击<ul>中的名称可在名称</li> </ul>下创建更多<li>

1 个答案: