方法在某些条件下不起作用

时间:2014-02-06 22:07:16

标签: javascript jquery coffeescript

我正在制作一个简单的民意调查应用概念证明。

我有两页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 

0 个答案:

没有答案