单击元素以显示其他 .get 信息答案

【问题标题】：Clicking on an element to reveal additional .get information单击元素以显示其他 .get 信息
【发布时间】：2013-11-23 19:44:20
【问题描述】：

我正在尝试解决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.s，我仍然是一个新手程序员。我发现所有这些活动部件都非常耗费精力。所以我非常感谢我能得到的任何帮助。谢谢。

【问题讨论】：

标签： javascript jquery api get

【解决方案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

【讨论】：

【解决方案2】：

当点击事件触发时，legislator 变量不再包含您要查找的数据。

【讨论】：