I have a page that runs a JavaScript file that pulls data from a JSON file. The JS appends a div on the page. Currently the JS runs on $(document).ready.
我有一个页面，它运行一个JavaScript文件，从JSON文件中提取数据。JS在页面上附加一个div。目前，JS运行在$(document).ready上。
I have added tabs to the page with Bootstrap, and I would like to run the same JS code on the different tabs, but accessing a different JSON file for each tab.
我已经用Bootstrap向页面添加了选项卡，我希望在不同的选项卡上运行相同的JS代码，但是要为每个选项卡访问不同的JSON文件。
Would I need to wrap the JS into a new function and call that on function using a tab click event? Just looking for a little help on the best way to do this.
我是否需要将JS封装到一个新函数中，并使用tab单击事件调用该函数?我只是想在做这件事的最好方法上寻求一点帮助。
Edited to add code:
编辑添加代码:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="quiz.json"></script>
<script src="Quiz.js"></script>
<link rel="stylesheet" type="text/css" href="Assets/bootstrap-3.3.5-dist/css/bootstrap.min.css">
</head>
<body role = "document">
<div class="container" >
<div class="row">
<div class="col-md-12">
<h2>Presidential Trivia</h2> </hr>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#tab1" aria-controls="home" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#tab2" aria-controls="profile" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#tab3" data-toggle="tab">Messages</a></li>
</ul>
</div>
</div>
<!-- tab sections -->
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<div class="row" style="height:100px">
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<div id='main' class="panel panel-info">
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="min-width:3%; width:0%">
</div>
</div>
<div id='buttons'>
<button id='prev' class='btn'>Back</button>
<button id='next' class='btn pull-right'>Next</button><br><br>
<button id='restart' class='btn'>Start Over?</button>
</div>
</div>
<div class="col-md-4"></div>
</div>
</div>
<div class="tab-pane" id="tab2">
<div class="row" style="height:100px">
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<div id='main' class="panel panel-info">
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="min-width:3%; width:0%">
</div>
</div>
<div id='buttons'>
<button id='prev' class='btn'>Back</button>
<button id='next' class='btn pull-right'>Next</button><br><br>
<button id='restart' class='btn'>Start Over?</button>
</div>
</div>
<div class="col-md-4"></div>
</div>
</div>
</div>
<div class="tab-pane" id="tab3">Tab 3 content....
</div>
</div>
</div>
<script src="Assets/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</body>
</html>
JavaScript:
JavaScript:
$(document).ready(function(){
var allQuestions;
var userName ;
var counter = 0;
var main = $("#main");
var userInputs = [];
var numCorrect = 0;
var fadeSpeed = 700;
var next = $("#next");
var prev = $("#prev");
var restart = $("#restart")
//ajax call to json file
function getData(myUrl, cb) {
$.ajax({
type: "GET",
url: myUrl,
success: function(content) {
var myData = content;
cb(null, myData);
},
error: function() {
cb(true);
}
});
}
getData('quiz.json', function(err, data) {
if(err) {
console.log('There was an error getting quiz data. Try again later or contact the admin.');
return;
}
//store data as a global variable
allQuestions = data;
//load first question
createQDiv();
})
if (counter == 0) {
$("#prev").hide();
}
//click handler for Next Question button
next.click(function() {
var selection = $("input[name=answer]:checked").val();
if (selection != undefined) {
choose();
fadeQuestion();
setTimeout(function() {
clearLast();
counter++;
moveProgress();
prev.show();
createQDiv();
}, fadeSpeed);
} else {
alert("You must select an answer to proceed.")
};
});
//creates question element
function createQDiv() {
//$("#prev").hide();
var question = $("<div id='question' class='panel-body'></div>").fadeIn(fadeSpeed);
main.append(question);
if (counter < allQuestions.length) {
displayNext();
} else {
displayScore();
}
};
//fade out question element
function fadeQuestion() {
$("#question").fadeOut(fadeSpeed);
};
//clears question element
function clearLast() {
main.empty();
};
//adds question and answers to question element
function displayNext() {
restart.hide();
var qPara = $("<p>" + allQuestions[counter].question + "</p>")
$("#question").append(qPara);
createRadios();
addPrevSelection();
};
//creates radio buttons for each choice
function createRadios() {
var choices = allQuestions[counter].choices;
//var formElement = $("<form></form>");
//$("#question").append(formElement);
for (i = 0; i < choices.length; i++) {
$("#question").append($("<input type='radio' name='answer' value='" + i + "'>" + choices[i] + "<br>"));
};
};
//checks user's answer choice and stores in array
function choose() {
var input = $("input[name=answer]:checked").val();
userInputs[counter] = input;
};
//create function for checking user's answers vs number correct. output = number of correct answers
function correctAns() {
for (i = 0; i < allQuestions.length; i++) {
if (userInputs[i] == allQuestions[i].correct) {
numCorrect++;
};
};
};
//create 'last page' for displaying user's score
function displayScore() {
next.hide();
prev.hide();
correctAns();
var score = (numCorrect / allQuestions.length);
//var encouragement;
var scoreElement = $("<p>You got " + numCorrect + " out of " + allQuestions.length + " correct.</p>");
$("#question").append(scoreElement);
/*if(score == 1){encouragement = " Perfect Score. You are amazing.";}else if(0.5<score<1){encouragement = "Better luck next time!";}else{encouragement = "Repeat after me: 'Do you want fries with that?'"};
scoreElement.append(encouragement);*/
restart.show();
};
prev.click(function() {
if (counter > 0) {
fadeQuestion();
setTimeout(function() {
clearLast();
counter--;
moveProgress();
createQDiv();
addPrevSelection();
choose();
}, fadeSpeed);
//Cristina: what if user changes input and then hits back? It isn't kept, only logged on the next button.
}
else {
prev.hide();
}
});
function addPrevSelection() {
var selection = userInputs[counter];
var radioSelected = $("input[value='" + selection + "']");
//alert(radioSelected);
radioSelected.prop("checked", true);
};
restart.click(function() {
counter = 0;
next.show();
userInputs = [];
numCorrect = 0;
clearLast();
moveProgress();
createQDiv();
});
function moveProgress(){
var newWidth = ((counter)/allQuestions.length)*100;
$(".progress-bar").css("width", "" + newWidth + "%");
};
});
JSON file:
JSON文件:
[{
"question": "How many presidents were members of the Whig party?",
"choices": ["Four", "Three", "Two"],
"correct": 0
}, {
"question": "Who was the first president to be impeached?",
"choices": ["Andrew Jackson", "Andrew Johnson", "Warren Harding"],
"correct": 1
}, {
"question": "How many presidents died during their presidency?",
"choices": ["Four", "Six", "Eight"],
"correct": 2
}, {
"question": "How many presidents had no party affiliation?",
"choices": ["One", "Two", "Three"],
"correct": 0
}, {
"question": "Who was the only president to serve two non-consecutive terms, making him both the 22nd and 24th president?",
"choices": ["John Quincy Adams", "William Howard Taft", "Grover Cleveland"],
"correct": 2
}]
1 个解决方案
#1
1
Below is just a DEMO on how you can use 'show.bs.tab` event to change content of current active pane before showing up. Check for inline comments for more detailed explanation.
下面只是演示如何使用'show.bs。选项卡事件在显示之前更改当前活动窗格的内容。检查内联注释以获得更详细的解释。
//Below I have just given sample for contents to change dynamcically, You can think
//of changing or assigning urls here instead of contents
//For Ex: var url="sample/sample" and change this in switch case
var Homejson="Some Home Content";
var Profilejson="Some Profile Content";
var MessagesJson="Some Message Content";
var SettingsJson="Some Settings Content";
var body="";
function getTabContents(target)
{
//based on the target passed change the url content in this common function or you
//can pass the url here based on tab selected and write your ajax as below
/*$.ajax({
url:urlpassedasparameter,
data:necessarydata,
success:function(result){
return the content here
},
error:function(){
return some message here
}
});*/
var content="";
switch(target){
case "home":
content=Homejson;
break;
case "profile":
content=Profilejson;
break;
case "messages":
content=MessagesJson;
break;
case "settings":
content=SettingsJson;
break;
default:
break;
}
return content;
}
$(document).ready(function(){
//call the function on document ready and pass the first panel as default
body = getTabContents("home")
$('#home').html(body);//assign html of content changed to the particular tab-pane
});
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
//this method is very important and e.target below refers to current element which is equal to "this"
var target=$(e.target).attr('aria-controls') // newly activated tab
//fetch any of the data from target element and use it to change the url or content
body=getTabContents(target);
//again get the contents from function
$("#"+target).html(body);
//add as html to body.
})<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">...</div>
<div role="tabpanel" class="tab-pane" id="profile">...</div>
<div role="tabpanel" class="tab-pane" id="messages">...</div>
<div role="tabpanel" class="tab-pane" id="settings">...</div>
</div>
</div>Let me know if you have any doubts
如果你有任何疑问，请告诉我
#1
1
Below is just a DEMO on how you can use 'show.bs.tab` event to change content of current active pane before showing up. Check for inline comments for more detailed explanation.
下面只是演示如何使用'show.bs。选项卡事件在显示之前更改当前活动窗格的内容。检查内联注释以获得更详细的解释。
//Below I have just given sample for contents to change dynamcically, You can think
//of changing or assigning urls here instead of contents
//For Ex: var url="sample/sample" and change this in switch case
var Homejson="Some Home Content";
var Profilejson="Some Profile Content";
var MessagesJson="Some Message Content";
var SettingsJson="Some Settings Content";
var body="";
function getTabContents(target)
{
//based on the target passed change the url content in this common function or you
//can pass the url here based on tab selected and write your ajax as below
/*$.ajax({
url:urlpassedasparameter,
data:necessarydata,
success:function(result){
return the content here
},
error:function(){
return some message here
}
});*/
var content="";
switch(target){
case "home":
content=Homejson;
break;
case "profile":
content=Profilejson;
break;
case "messages":
content=MessagesJson;
break;
case "settings":
content=SettingsJson;
break;
default:
break;
}
return content;
}
$(document).ready(function(){
//call the function on document ready and pass the first panel as default
body = getTabContents("home")
$('#home').html(body);//assign html of content changed to the particular tab-pane
});
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
//this method is very important and e.target below refers to current element which is equal to "this"
var target=$(e.target).attr('aria-controls') // newly activated tab
//fetch any of the data from target element and use it to change the url or content
body=getTabContents(target);
//again get the contents from function
$("#"+target).html(body);
//add as html to body.
})<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">...</div>
<div role="tabpanel" class="tab-pane" id="profile">...</div>
<div role="tabpanel" class="tab-pane" id="messages">...</div>
<div role="tabpanel" class="tab-pane" id="settings">...</div>
</div>
</div>Let me know if you have any doubts
如果你有任何疑问，请告诉我