$(document).ready(function(){ $.getJSON("resource/classmates.json",function(result){ $.each(result, function(i, field){ var tmp_button=$('<button type="button" data-toggle="button" chosen_state=0></button>').text(i); tmp_button.attr("title",i); $("#btn-group-vertical-classes").append(tmp_button); }); $(".btn.btn-default.btn-class").click(function(){ var tmp_chosen=Number($(this).attr("chosen_state"))^1; $(this).attr("chosen_state",String(tmp_chosen)); showClassmates(result); $(".btn.btn-default.btn-classmate").click(function(){ $(".btn-classmate").attr("class","btn btn-default btn-classmate btn-info"); $("#collapseOne").attr("class","panel-collapse collapse"); var selected_classmate=$(this).text(); showClassmateDetail(result,selected_classmate); }); }); }); }) function showClassmates(result){ $("#btn-group-vertical-classmates").empty(); var chosen_list=new Array(); $(".btn.btn-default.btn-class").filter(function(){ judgeflag=false; if($(this).attr("chosen_state")=="1"){ judgeflag=true; chosen_list.push($(this).text()); } return judgeflag; }); $.each(result,function(i,field){ var chosen_list_x; for (chosen_list_x in chosen_list){ if(chosen_list[chosen_list_x]==i){ $.each(field,function(j,field2){ var tmp_button=$('<button type="button" data-toggle="button" chosen_state=0></button>').text(j); tmp_button.attr("title",j); $("#btn-group-vertical-classmates").append(tmp_button); }); } } }); } function showClassmateDetail(result,selected_classmate){ var classmate_context_item; $("#context_div").empty(); $.each(result,function(i,field){ $.each(field,function(j,field2){ if(j==selected_classmate){ $.each(field2,function(k,field3){ //alert(k); //alert(field3); classmate_context_item=k + ": " + field3; var tmp_p=$('<p></p>').text(classmate_context_item); $("#context_div").append(tmp_p); }); } }); }); }
classmates.json:
{ "Class 001": { "Xiao Wang": { "Gender": "Male", "Age": "18", "Interest": "Football", "Hometown": "Shanghai", "Chinese": "78", "Math": "90", "English": "66", "Physics": "81", "Chemistry": "88", "History": "69", "Geography": "92" }, "Xiao Li": { "Gender": "Male", "Age": "20", "Interest": "Basketball", "Hometown": "Beijing", "Chinese": "98", "Math": "77", "English": "97", "Physics": "72", "Chemistry": "73", "History": "88", "Geography": "81" } }, "Class 002": { "Xiao Cai": { "Gender": "Female", "Age": "19", "Interest": "Dance", "Hometown": "Gaoxiong", "Chinese": "93", "Math": "80", "English": "92", "Physics": "82", "Chemistry": "77", "History": "89", "Geography": "83" } }, "Class 003": { "Xiao Ma": { "Gender": "Male", "Age": "18", "Interest": "Reading", "Hometown": "Taibei", "Chinese": "91", "Math": "93", "English": "96", "Physics": "97", "Chemistry": "100", "History": "94", "Geography": "92" } }, "Class 005": { "Xiao Zhang": { "Gender": "Male", "Age": "20", "Interest": "Running", "Hometown": "Guangzhou", "Chinese": "67", "Math": "70", "English": "66", "Physics": "80", "Chemistry": 68, "History": "79", "Geography": "93" } } }
以上所述是小编给大家介绍的Bootstrap零基础入门教程(三)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: