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

时间:2013-11-23 19:44:21

标签: javascript jquery api get

我正在努力解决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,我仍然是一名新手程序员。我发现所有这些活动部件都非常精神疲惫。所以我真的很感激我能得到的任何帮助。感谢。

2 个答案:

答案 0 :(得分: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

答案 1 :(得分:0)

当click事件触发时,立法者变量不再包含您要查找的数据。