将变量从$（document）.ready（function（）{}传递给$（window）.load（function（）{}

Question

想象一下，如果我设法在percent_pass创建document.ready，我该如何将该var传递给window.load？

＆＃13;

＆＃13;

$(document).ready(function() {
  jQuery(function() {
    var question_count = $('.question-body').length;
    var question_percent = (1 / question_count) * 100;
    var color_percent = (300 / question_count);
    var percent_pass = 0;

    $('.answers input').click(function() {
      if ($(this).data('clicked') == false) {
        $(this).data('clicked', true);

        var old_height = $('.percent-solve').css('height');
        var new_height = parseInt(old_height) + color_percent;
        percent_pass += question_percent;

        if (percent_pass > 100) {
          percent_pass = 100;
        }
        $(".percentshow").html("%" + percent_pass);
        $('.count').text(percent_pass);
        $('.percent-solve').css('height', new_height + 'px');
        $('.count').each(function() {
          $(this).prop('Counter', percent_pass - question_percent).animate({
            Counter: $(this).text()
          }, {
            duration: 500,
            easing: 'swing',
            step: function(now) {
              $(this).text(Math.ceil(now));
            }
          });
        });
        if (Math.ceil(percent_pass) == 100) {
          $('.end-test').css('color', '#ff9803');
        }
      }

      var q_count = $(this).parents('.question-body').attr("id");
      q_count = parseInt(q_count) + 1;
      $('.question-body').removeClass('open-question');
      $.scrollTo($('#' + q_count), 500, {
        onAfter: function() {
          $('#' + q_count).addClass('open-question');
        }
      });
    });
  });
});

$(window).load(function() {
  doughnutWidget.options = {
    container: $('#container'),
    width: 100,
    height: 100,
    class: 'myClass',
    cutout: 50
  };

  doughnutWidget.render(data());

  setInterval(init, 2000);
});

function init() {
  doughnutWidget.render(data());
}

function data() {
  var data = {
    pending: {
      val: Math.round(percent_pass),
      color: '#57B4F2',
    },
    delivered: {
      val: Math.round(percent_pass),
      color: '#6DED5C'
    },
    delayed: {
      val: Math.round(percent_pass),
      color: '#E63329',
    }
  };

  return data;
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

编辑：

我检查过你的网站...你的问题与变量范围完全无关......你正在为一个容器元素执行一个脚本，这个脚本在你的HTML DOM中是不存在的，因此脚本会失败。

只需使用globalscope vars - https://www.w3schools.com/js/js_scope.asp

＆＃13;

＆＃13;

//GlobalScope vars
var doughnutWidget = {/*Dummy js object, since i don't know douhnutWidget lib*/
    options: "",
    render: function() {
      return null;
    }
  },
  percent_pass;
//GlobalScope vars

$(document).ready(function() {

  jQuery(function() {

    percent_pass = 0;

  });
});

$(window).load(function() {
  doughnutWidget.options = {
    container: $('#container'),
    width: 100,
    height: 100,
    class: 'myClass',
    cutout: 50
  };

  doughnutWidget.render(data());

  setInterval(init, 2000);
  console.log("see? no errors, fnc data() returns"+data()+" (that should be correct)");
});

function init() {
  doughnutWidget.render(data());
}

function data() {

  var data = {
    pending: {
      val: Math.round(percent_pass),
      color: '#57B4F2',

    },
    delivered: {
      val: Math.round(percent_pass),
      color: '#6DED5C'
    },
    delayed: {
      val: Math.round(percent_pass),
      color: '#E63329',
    }
  };

  return data;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

＆＃13;

＆＃13;

您的更新代码

＆＃13;

＆＃13;

var question_count,question_percent,color_percent,percent_pass;//THESE ARE NOW GLOBAL VARS!

var doughnutWidget={options:"",render:function(){}};//again, dummy object just to prevent console errors
$(document).ready(function() {
  question_count = $('.question-body').length;
  question_percent = (1 / question_count) * 100;
  color_percent = (300 / question_count);
  percent_pass = 0;
  $('.answers input').click(function() {
    if ($(this).data('clicked') == false) {
      $(this).data('clicked', true);
      var old_height = $('.percent-solve').css('height');
      var new_height = parseInt(old_height) + color_percent;
      percent_pass += question_percent;

      if (percent_pass > 100) {
        percent_pass = 100;
      }
      $(".percentshow").html("%" + percent_pass);
      $('.count').text(percent_pass);
      $('.percent-solve').css('height', new_height + 'px');
      $('.count').each(function() {
        $(this).prop('Counter', percent_pass - question_percent).animate({
          Counter: $(this).text()
        }, {
          duration: 500,
          easing: 'swing',
          step: function(now) {
            $(this).text(Math.ceil(now));
          }
        });
      });
      if (Math.ceil(percent_pass) == 100) {
        $('.end-test').css('color', '#ff9803');
      }

    }

    var q_count = $(this).parents('.question-body').attr("id");
    q_count = parseInt(q_count) + 1;
    $('.question-body').removeClass('open-question');
    $.scrollTo($('#' + q_count), 500, {
      onAfter: function() {
        $('#' + q_count).addClass('open-question');
      }
    });
  });
});

$(window).load(function() {
  doughnutWidget.options = {
    container: $('#container'),
    width: 100,
    height: 100,
    class: 'myClass',
    cutout: 50
  };

  doughnutWidget.render(data());

  setInterval(init, 2000);
});

function init() {
  doughnutWidget.render(data());
}

function data() {

  var data = {
    pending: {
      val: Math.round(percent_pass),
      color: '#57B4F2',

    },
    delivered: {
      val: Math.round(percent_pass),
      color: '#6DED5C'
    },
    delayed: {
      val: Math.round(percent_pass),
      color: '#E63329',
    }
  };

  return data;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

＆＃13;

＆＃13;

Answer 2

将百分比更新为a并在window.load中读取

Answer 3

尝试将x.getStatus()置于var percent_pass = 0;功能之外。 您的问题与变量的范围有关。 由于它是在ready（）的回调函数中定义的，因此只能在相应的范围内使用。

通过将$(document).ready()放在回调函数之外，可以将其范围更改为全局。请尝试以下代码段

＆＃13;

＆＃13;

var percent_pass = 0;

＆＃13;

＆＃13;

＆＃13;