点击<ul>创建更多<李>下面的名字

Clicking on name in <ul> creates more <li> underneath names

本文关键字：gt lt ul 创建 点击      更新时间：2023-12-31

我在让我的小脚本正确工作时遇到了问题，我只是在寻找一些指导。我正努力做到这一点，当我点击立法者的名字时，它会在他们的名字下面显示更多关于他们的信息。比如他们的政党和地区。然而，当我点击一个名字时，它所做的只是在立法者的名字下面张贴更多的列表项目。我对编程很陌生，有点拘泥于这里该做什么。有什么建议吗？如果有帮助的话，我会使用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;
    });
});

我建议在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")，则无需首先包含标记名。

相关文章：