我正在制作一个简单的民意调查应用概念证明。
我有两页poll.html和results.html
如果我在results.html上并刷新条形填充。
如果我点击poll.html页面上的投票,我会进入所有方法,但条形图不会填充。
我错过了什么?
$(document).ready ->
Poll =
init: ->
Poll.fillPollData()
$("#view-results").mouseup =>
Poll.updateResults("trick")
total: 112
answers:
trick : 10,
flute : 40,
chopper : 60,
fills : 2
fillPollData: ->
console.log("in fillPollData")
$.each Poll.answers, (k, v) ->
console.log(k)
percent = Math.floor((v / Poll.total) * 100)
console.log(percent)
$("#"+k).css "width", percent+"%"
return
updateResults: (answer) ->
Poll.fillPollData()
console.log("In updatedResults")
Poll.init()
JS
(function() {
$(document).ready(function() {
var Poll;
Poll = {
init: function() {
Poll.fillPollData();
return $("#view-results").mouseup((function(_this) {
return function() {
return Poll.updateResults("trick");
};
})(this));
},
total: 112,
answers: {
trick: 10,
flute: 40,
chopper: 60,
fills: 2
},
fillPollData: function() {
console.log("in fillPollData");
return $.each(Poll.answers, function(k, v) {
var percent;
console.log(k);
percent = Math.floor((v / Poll.total) * 100);
console.log(percent);
$("#" + k).css("width", percent + "%");
});
},
updateResults: function(answer) {
Poll.fillPollData();
return console.log("In updatedResults");
}
};
return Poll.init();
});
}).call(this);
结果:
<h3>What was the best scene from The Legend of Ron Burgundy?</h3>
<ul id="results">
<li><label>Teleprompter trick</label><div class="votes-data">60% (24 votes)</div><br />
<div class="progress">
<div id="trick" class="progress-bar yellow" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">60% Complete</span>
</div>
</div>
</li>
<li><label>Ron playing the jazz flute</label><div class="votes-data">30% (14 votes)</div><br />
<div class="progress">
<div id="flute" class="progress-bar red" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">30% Complete</span>
</div>
</div>
</li>
<li><label>Ron thashes a chopper</label><div class="votes-data">15% (7 votes)</div><br />
<div class="progress">
<div id="chopper" class="progress-bar blue" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">15% Complete</span>
</div>
</div>
</li>
<li><label>Veronica fills in for Ron</label><div class="votes-data">2% (1 votes)</div><br />
<div class="progress">
<div id="fills" class="progress-bar white" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">2% Complete</span>
</div>
</div>
</li>
</ul>
<a href="/polls">Return To Poll</a>
poll.html
<h3>What was the best scene from The Legend of Ron Burgundy?</h3>
<form id="poll">
<ul id="answers">
<li><input name="answers" type="radio"><label>Ron playing the jazz flute</label></li>
<li><input name="answers" type="radio"><label>Ron thashes a chopper</label></li>
<li><input name="answers" type="radio"><label>Veronica fills in for Ron</label></li>
<li><input name="answers" type="radio"><label>Teleprompter trick</label></li>
</ul>
<a class="btn btn-warning" id="view-results" href="/results">Vote</a>
<!-- <input class="btn btn-warning" id="view-results" type="submit" value="Vote"> -->
</form>
的console.log
in fillPollData polls.js?body=1:21
trick polls.js?body=1:24
8 polls.js?body=1:26
[context: document, selector: "#trick", jquery: "1.11.0", constructor: function, toArray: function…]
polls.js?body=1:27
flute polls.js?body=1:24
35 polls.js?body=1:26
[context: document, selector: "#flute", jquery: "1.11.0", constructor: function, toArray: function…]
polls.js?body=1:27
chopper polls.js?body=1:24
53 polls.js?body=1:26
[context: document, selector: "#chopper", jquery: "1.11.0", constructor: function, toArray: function…]
polls.js?body=1:27
fills polls.js?body=1:24
1 polls.js?body=1:26
[context: document, selector: "#fills", jquery: "1.11.0", constructor: function, toArray: function…]
polls.js?body=1:27
in fillPollData polls.js?body=1:21
trick polls.js?body=1:24
8 polls.js?body=1:26
[context: document, selector: "#trick", jquery: "1.11.0", constructor: function, toArray: function…]
polls.js?body=1:27
flute polls.js?body=1:24
35 polls.js?body=1:26
[context: document, selector: "#flute", jquery: "1.11.0", constructor: function, toArray: function…]
polls.js?body=1:27
chopper polls.js?body=1:24
53 polls.js?body=1:26
[context: document, selector: "#chopper", jquery: "1.11.0", constructor: function, toArray: function…]
polls.js?body=1:27
fills polls.js?body=1:24
1 polls.js?body=1:26
[context: document, selector: "#fills", jquery: "1.11.0", constructor: function, toArray: function…]
polls.js?body=1:27
In updatedResults