點擊一個元素以顯示額外的.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.s的第一次經歷，我仍然是一名新手程序員。我發現所有這些運動部件都非常精神疲憊。所以我非常感謝我能夠得到的任何幫助。謝謝。

Answer 1

我會建議構建出所有提交的html，甚至是每個立法者下方的細節。然後隱藏所有額外的細節。並設置你的李的功能來顯示相關的細節。

$(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 

Answer 2

當click事件觸發時，立法者變量不再包含您要查找的數據。