我正在建立一个网站。它试图展示的是运动队的时间表。我为每个团队都有一个JSON文件。我希望能够点击某个团队的单选按钮,让它在另一个div的JSON文件中显示某些信息。
所以我将发布一个团队的例子。 单选按钮:
<tr><td><label>
<input type="radio" name="teamShow" value="cCubs">Chicago Cubs
</label></td></tr>
JQuery:
$("input[name='teamShow']").change(function() {
selected = $('input[name=teamShow]:checked' ).val();
console.log(selected);
if (selected == "cCubs") {
$('#markerMessage7').html(
$.getJSON( "ChicagoCSked.json", function( data ) {
$.each(data, function(i, entry) {
displayData = data.ccJSON.SUBJECT[0];})
})
)
}
})
身体:
<div id ="markerMessage7">-</div>
JSON(只有一个数组):
ccJSON =[
{
"START_DATE":"02/27/14",
"START_TIME":"02:05 PM",
"START_TIME_ET":"03:05 PM",
"SUBJECT":"D-backs at Cubs",
"LOCATION":"Cubs Park",
"DESCRIPTION":"",
"END_DATE":"02/27/14",
"END_DATE_ET":"02/27/14",
"END_TIME":"05:05 PM",
"END_TIME_ET":"06:05 PM",
"REMINDER_OFF":"FALSE",
"REMINDER_ON":"TRUE",
"REMINDER_DATE":"02/27/14",
"REMINDER_TIME":"01:05 PM",
"REMINDER_TIME_ET":"02:05 PM",
"SHOWTIMEAS_FREE":"FREE",
"SHOWTIMEAS_BUSY":"BUSY"
},
我似乎无法写任何东西。我希望它有开始日期,主题和开始时间。我只是在努力工作,这就是我的代码中唯一的原因。
答案 0 :(得分:1)
LIVE DEMO( and this JSON page example )
我建议您使用稍微不同的JSON结构:
{
"cCubs" : {
"START_DATE":"02/27/14",
"START_TIME":"02:05 PM",
"START_TIME_ET":"03:05 PM",
"SUBJECT":"D-backs at Cubs",
"LOCATION":"Cubs Park"
},
"Something" : {
"START_DATE":"02/29/14",
"START_TIME":"04:00 PM",
"START_TIME_ET":"05:05 PM",
"SUBJECT":"Something subject",
"LOCATION":"Something Park"
}
}
有了这个,您可以使用以下单选按钮:
<label>
<input type="radio" name="teamShow" value="cCubs">
Chicago Cubs
</label>
<label>
<input type="radio" name="teamShow" value="Something">
Something
</label>
这个琐碎的JS:
$("input[name='teamShow']").change(function() {
var selected = $('input[name=teamShow]:checked').val();
var displayData = "";
$.getJSON( "allTeamsData.json", function( data ) {
displayData = data[selected].SUBJECT;
$('#markerMessage7').html( displayData );
});
});