我正在努力解决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,我仍然是一名新手程序员。我发现所有这些活动部件都非常精神疲惫。所以我真的很感激我能得到的任何帮助。感谢。
答案 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事件触发时,立法者变量不再包含您要查找的数据。