在JS中访问ready函数之外的变量值

Question

为什么在下面的代码中，我无法获得变量x的值？ 这是代码 -

var formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  minimumFractionDigits: 2,
  // the default value for minimumFractionDigits depends on the currency
  // and is usually already 2
});

window.myBar = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: options
});

如何访问变量＆＃39; x＆＃39;值var x; $(document).ready(function(){ x=9; }); console.log(x); 以外的值？

＆＃13;

＆＃13;

$(document).ready(function(){});

＆＃13;

$(document).ready(function(){
var arrQuotes=[], arrAuthor = [], colors=['#132145','#800000','#990404','#008080','#16a085','#AEBF4E','#27ae60','#ffc0cb', '#2c3e50', '#f39c12', '#e74c3c', '#9b59b6', '#FB6964', '#342224', "#472E32", "#BDBB99", "#77B1A9", "#73A857"], index;
  $.getJSON(
  "https://codepen.io/coder_at_work/pen/dVPxBm.js",
  function(data) {
    data.forEach(function(object){
      arrQuotes.push(object["quote"]);
      arrAuthor.push(object["author"]);
    });
  }
  );
  
  $("#quote").on("click",function(){
    index = Math.floor(Math.random()*arrQuotes.length);
    currentQuote = arrQuotes[index];
    currentAuthor = arrAuthor[index];
    $(".content").html("<span class='fa fa-quote-left'></span>"+arrQuotes[index]);
    $(".author").html("<span>- </span>"+arrAuthor[index]);
    var c= Math.floor(Math.random()*colors.length);
      $("body").animate({
        backgroundColor: colors[c],
        color: colors[c]
      },1500);
      $(".button").animate({
        backgroundColor: colors[c]
      },1500);
      $(".author").animate({
        color: colors[c]
      },1500);

  });
  
  $("#tweet-quote").attr('href', 'https://twitter.com/intent/tweet?text=' + encodeURIComponent('"' + arrQuotes[index] + '" ' + arrAuthor[index]));
});

＆＃13;

@import url('https://fonts.googleapis.com/css?family=Playfair+Display');
*{
  margin: 0;
  box-sizing: border-box;
  padding: 0;
}
body{
  margin: 0;
  background-color: #0EB022;
}
.container{
  padding: 50px;
  position: absolute;
  height: auto;
  width: 70%;
  background-color: #FFF;
  margin: auto;
  left: 50%;
  top: 50%;
  transform:translate(-50%,-50%);
}
#default{
  font-size: 30px;
  font-weight: bold;
}
.content{
  height: auto;
  text-align: center;
  font-size: 30px;
  font-family: 'Playfair Display', serif;
}
.author{
  height: auto;
  text-align: right;
  font-size: 20px;
  color: #0EB022;
}
#b1{
  width: 100px;
  padding: 10px;
  float: right;
}
.fa {
  border: 0px;
  padding: 3px;
  margin: 3px;
  font-size: 30px;
  width: 40px;
  text-align: center;
  text-decoration: none;
  border-radius: 3px;
}

.fa:hover {
    opacity: 0.7;
}
.fa-twitter {
  background: #0EB022;
  color: white;
}
.fa-tumblr {
  background: #0EB022;
  color: white;
}
#quote{
  float: right;
  height: 36px;
  width: auto;
  margin: 3px;
  padding: 10px;
  color: #FFF;
  border-radius: 2px;
  border-color: transparent;
  border: 0;
  background-color: #0EB022;
}
#quote:hover {
    opacity: 0.7;
}

＆＃13;

＆＃13;

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="content"> <p id="default">Press 'New Quote'</p> </div> <br> <div class="author"> </div> <br><br> <a class="button fa fa-twitter" id="tweet-quote" title="Tweet this quote on Twitter" target="_blank"></a> <a class="button fa fa-tumblr" title="Post this quote on tumblr"></a> <button class="button" id="quote">New Quote</button> </div>为什么arrQuotes[index]和arrAuthor[index]给了我undefined的值？ 我该如何访问它们？

Answer 1

您在dom加载和dom加载之前打印后分配值。请参阅下面的示例以了解。

＆＃13;

＆＃13;

var x=1;
$(document).ready(function(){
x=9;
console.log("After document Load :",x);
});
console.log("Before document Load :",x);

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

<强>更新 只需将#tweet-quote放入#quote点击事件

即可

＆＃13;

＆＃13;

$(document).ready(function(){
var arrQuotes=[], arrAuthor = [], colors=['#132145','#800000','#990404','#008080','#16a085','#AEBF4E','#27ae60','#ffc0cb', '#2c3e50', '#f39c12', '#e74c3c', '#9b59b6', '#FB6964', '#342224', "#472E32", "#BDBB99", "#77B1A9", "#73A857"], index;
  $.getJSON(
  "https://codepen.io/coder_at_work/pen/dVPxBm.js",
  function(data) {
    data.forEach(function(object){
      arrQuotes.push(object["quote"]);
      arrAuthor.push(object["author"]);
    });
  }
  );
  
  $("#quote").on("click",function(){
    index = Math.floor(Math.random()*arrQuotes.length);
    currentQuote = arrQuotes[index];
    currentAuthor = arrAuthor[index];
    $(".content").html("<span class='fa fa-quote-left'></span>"+arrQuotes[index]);
    $(".author").html("<span>- </span>"+arrAuthor[index]);
    var c= Math.floor(Math.random()*colors.length);
      $("body").animate({
        backgroundColor: colors[c],
        color: colors[c]
      },1500);
      $(".button").animate({
        backgroundColor: colors[c]
      },1500);
      $(".author").animate({
        color: colors[c]
      },1500);
      $("#tweet-quote").attr('href', 'https://twitter.com/intent/tweet?text=' + encodeURIComponent('"' + arrQuotes[index] + '" ' + arrAuthor[index]));
       console.log('https://twitter.com/intent/tweet?text=' + encodeURIComponent('"' + arrQuotes[index] + '" ' + arrAuthor[index]));
});





  });
  
 

＆＃13;

@import url('https://fonts.googleapis.com/css?family=Playfair+Display');
*{
  margin: 0;
  box-sizing: border-box;
  padding: 0;
}
body{
  margin: 0;
  background-color: #0EB022;
}
.container{
  padding: 50px;
  position: absolute;
  height: auto;
  width: 70%;
  background-color: #FFF;
  margin: auto;
  left: 50%;
  top: 50%;
  transform:translate(-50%,-50%);
}
#default{
  font-size: 30px;
  font-weight: bold;
}
.content{
  height: auto;
  text-align: center;
  font-size: 30px;
  font-family: 'Playfair Display', serif;
}
.author{
  height: auto;
  text-align: right;
  font-size: 20px;
  color: #0EB022;
}
#b1{
  width: 100px;
  padding: 10px;
  float: right;
}
.fa {
  border: 0px;
  padding: 3px;
  margin: 3px;
  font-size: 30px;
  width: 40px;
  text-align: center;
  text-decoration: none;
  border-radius: 3px;
}

.fa:hover {
    opacity: 0.7;
}
.fa-twitter {
  background: #0EB022;
  color: white;
}
.fa-tumblr {
  background: #0EB022;
  color: white;
}
#quote{
  float: right;
  height: 36px;
  width: auto;
  margin: 3px;
  padding: 10px;
  color: #FFF;
  border-radius: 2px;
  border-color: transparent;
  border: 0;
  background-color: #0EB022;
}
#quote:hover {
    opacity: 0.7;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="content">
      <p id="default">Press 'New Quote'</p>
    </div>
    <br>
    <div class="author">
    </div>
    <br><br>
    <a class="button fa fa-twitter" id="tweet-quote" title="Tweet this quote on Twitter" target="_blank"></a>
    <a class="button fa fa-tumblr" title="Post this quote on tumblr"></a>
    <button class="button" id="quote">New Quote</button>
</div>

＆＃13;

＆＃13;

＆＃13;