javascript - 单击一个元素以显示其他 .get 信息

Question

我正在尝试解决关于 this set of problems 的第二个问题.我必须能够单击立法者的姓名，然后才能显示有关他/她的其他信息。 Here's what I have so far .

$(function() {
  $("form#get-zip").submit(function() {
  var zip = $("input#zip").val();
  $.get("http://congress.api.sunlightfoundation.com/legislators/locate?apikey=191e116b2a244fb48c5028e8f370488b&zip=" + zip, function(responseText) {
    responseText.results.forEach(function(legislator) {
      $("ul#legislators").append("<li>" + " " + legislator.first_name + " " + legislator.last_name + " (" + legislator.chamber + ")" + "</li>");
      $("li").click(function() {
        $(this).append("<p>Party: " + legislator.party + ", District: " + legislator.district + "</p>");
      });
    });      
  });
  return false;
 });
});

问题是，当我点击立法者的名字时，它会显示列表中所有立法者的信息，而不是我点击的特定立法者的信息。这是我第一次接触 A.P.I.，我仍然是一名新手程序员。我发现所有这些移动部件非常耗费精力。所以我真的很感激我能得到的任何帮助。谢谢。

Answer 1

我建议在提交时构建所有 html，甚至是每个立法者下方显示的详细信息。然后隐藏所有额外的细节。并设置你的 li 的功能来显示相关的细节。

$(function() {
    $("form#get-zip").submit(
       function() {
           var zip = $("input#zip").val();
           $.getJSON("http://congress.api.sunlightfoundation.com/legislators/locate?apikey=191e116b2a244fb48c5028e8f370488b&zip=" + zip,
               function(responseText) {
                   $.each(responseText.results,
                       function(i,legislator) {
                           var newEl = $("<li>" + " " + legislator.first_name + " " + legislator.last_name + " (" + legislator.chamber + ")" + "<p>Party: " + legislator.party + ", District: " + legislator.district + "</p></li>");
                           newEl.appendTo("ul#legislators");
                           $("ul#legislators li").last().find("p").hide(); //  hide the last added one
                       });  // end each
               });   // end get function   
       });  // end submit function
    $("ul#legislators").on("click", "li",
         function() {
             var details = $(this).find("p");
             if (details.is(":visible")) {
                 details.hide();
             } else {
                 details.show();
             }
         });  // end click function
});  // end document ready function