我没有定义，在另一个函数中引用值

时间：2016-09-28 15:11:13

标签： javascript jquery function scope

我有两个功能：

  • [ 0, 0, 0, 0, 3 ] 有一个从1到20的for循环数，然后使用i的值来获取有关每个学校的相关数据
  • [ 0, 1, 2, 4, 3 ] 应显示与特定主题相关的文字：点击按钮时的英语，数学，科学或社会研究

问题

尝试在第一个函数中引用printData()的值，但由于其范围，我在控制台pickSubject()中收到错误。我如何参考i？

scripts.js中

i is not defined

的index.html 

i

2 个答案:

答案 0 :(得分：0)

在多个函数中有两种访问参数的方法：

1.通过它：

function a(){
var i;
b(i);//pass it
}

2.使两者都全球化：

var i;
function a(){}
function b(){}

答案 1 :(得分：0)

您似乎想要在点击时更新所有百分比值。这可以使用each函数完成：

$(".school__percentage").each(function(i) {
  $(this).html(schools[i][key]);
});

其中key为"percentEnglish"，"percentSocial"等

完整示例：

＆＃13;
＆＃13; 
// placeholder values
var schools = [];
for (var i = 1; i <= 20; i++) {
  schools.push({
  name: 'Name ' + i,
  district: 'District ' + i,
  percentEnglish: 1 * i,
  percentMath: 10 * i,
  percentScience: 100 * i,
  percentSocial: 1000 * i
});
}

$(function() {

  function printData() {
    // Iterate over all the school names
    for (var i = 0; i < schools.length; i++) {
      console.log(i);

      // Schools
      var schoolName = $(".school__name").eq(i).html(schools[i].name); // Name
      var schoolDistrict = $(".school__district").eq(i).html(schools[i].district); // District
      // var schoolCrest = // $(".school__image").attr("src", schools[i].crest) // Crest

      // Default
      var percentEnglish = $(".school__percentage").eq(i).html(schools[i].percentEnglish); // English
    }
  }

  function pickSubject() {
    $(".btn").click(function() {
      $(".btn").removeClass("is-selected");
      $(this).addClass("is-selected");
      var key;
      // Button behavior
      if ($(this).hasClass("btn-english")) {
        key = 'percentEnglish';
      } else if ($(this).hasClass("btn-math")) {
        key = 'percentMath'; // Math
      } else if ($(this).hasClass("btn-science")) {
        key = 'percentScience'; // Science
      } else if ($(this).hasClass("btn-social")) {
        key = 'percentSocial'; // Social Science
      }
      $(".school__percentage").each(function(i) {
        $(this).html(schools[i][key]);
      });
    });
  }

  printData();
  pickSubject();

});
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="widget high-school">
  <div class="widget__info">
    <p class="widget__category">High school</p>
    <p class="widget__title">Missouri Assessment Program standouts</p>
  </div>

  <div class="widget__buttons">
    <p class="widget__rank">Rank by:</p>
    <button class="btn btn-english is-selected">English</button>
    <button class="btn btn-math">Math</button>
    <button class="btn btn-science">Science</button>
    <button class="btn btn-social">Social Studies</button>
  </div>
  <div class="wrapper">
    <div class="schools">
      <div class="school" data-id="1">
        <img src="http://placehold.it/45x45" class="school__image">
        <div class="school__details">
          <div class="school__name">tk-name</div>
          <div class="school__district">tk-district</div>
        </div>
        <div class="school__percentage">-%</div>
      </div>
      <!-- school -->

      <div class="school" data-id="2">
        <img src="http://placehold.it/45x45" class="school__image">
        <div class="school__details">
          <div class="school__name">tk-name</div>
          <div class="school__district">tk-district</div>
        </div>
        <div class="school__percentage">-%</div>
      </div>
      <!-- school -->

      <div class="school" data-id="3">
        <img src="http://placehold.it/45x45" class="school__image">
        <div class="school__details">
          <div class="school__name">tk-name</div>
          <div class="school__district">tk-district</div>
        </div>
        <div class="school__percentage">-%</div>
      </div>
      <!-- school -->

      <div class="school" data-id="4">
        <img src="http://placehold.it/45x45" class="school__image">
        <div class="school__details">
          <div class="school__name">tk-name</div>
          <div class="school__district">tk-district</div>
        </div>
        <div class="school__percentage">-%</div>
      </div>
      <!-- school -->

      <div class="school" data-id="5">
        <img src="http://placehold.it/45x45" class="school__image">
        <div class="school__details">
          <div class="school__name">tk-name</div>
          <div class="school__district">tk-district</div>
        </div>
        <div class="school__percentage">-%</div>
      </div>
      <!-- school -->

      <div class="school" data-id="6">
        <img src="http://placehold.it/45x45" class="school__image">
        <div class="school__details">
          <div class="school__name">tk-name</div>
          <div class="school__district">tk-district</div>
        </div>
        <div class="school__percentage">-%</div>
      </div>
      <!-- school -->

      <div class="school" data-id="7">
        <img src="http://placehold.it/45x45" class="school__image">
        <div class="school__details">
          <div class="school__name">tk-name</div>
          <div class="school__district">tk-district</div>
        </div>
        <div class="school__percentage">-%</div>
      </div>
      <!-- school -->

      <div class="school" data-id="8">
        <img src="http://placehold.it/45x45" class="school__image">
        <div class="school__details">
          <div class="school__name">tk-name</div>
          <div class="school__district">tk-district</div>
        </div>
        <div class="school__percentage">-%</div>
      </div>
      <!-- school -->

      <div class="school" data-id="9">
        <img src="http://placehold.it/45x45" class="school__image">
        <div class="school__details">
          <div class="school__name">tk-name</div>
          <div class="school__district">tk-district</div>
        </div>
        <div class="school__percentage">-%</div>
      </div>
      <!-- school -->

      <div class="school" data-id="10">
        <img src="http://placehold.it/45x45" class="school__image">
        <div class="school__details">
          <div class="school__name">tk-name</div>
          <div class="school__district">tk-district</div>
        </div>
        <div class="school__percentage">-%</div>
      </div>
      <!-- school -->

      <div class="school" data-id="11">
        <img src="http://placehold.it/45x45" class="school__image">
        <div class="school__details">
          <div class="school__name">tk-name</div>
          <div class="school__district">tk-district</div>
        </div>
        <div class="school__percentage">-%</div>
      </div>
      <!-- school -->

      <div class="school" data-id="12">
        <img src="http://placehold.it/45x45" class="school__image">
        <div class="school__details">
          <div class="school__name">tk-name</div>
          <div class="school__district">tk-district</div>
        </div>
        <div class="school__percentage">-%</div>
      </div>
      <!-- school -->

      <div class="school" data-id="13">
        <img src="http://placehold.it/45x45" class="school__image">
        <div class="school__details">
          <div class="school__name">tk-name</div>
          <div class="school__district">tk-district</div>
        </div>
        <div class="school__percentage">-%</div>
      </div>
      <!-- school -->

      <div class="school" data-id="14">
        <img src="http://placehold.it/45x45" class="school__image">
        <div class="school__details">
          <div class="school__name">tk-name</div>
          <div class="school__district">tk-district</div>
        </div>
        <div class="school__percentage">-%</div>
      </div>
      <!-- school -->

      <div class="school" data-id="15">
        <img src="http://placehold.it/45x45" class="school__image">
        <div class="school__details">
          <div class="school__name">tk-name</div>
          <div class="school__district">tk-district</div>
        </div>
        <div class="school__percentage">-%</div>
      </div>
      <!-- school -->

      <div class="school" data-id="16">
        <img src="http://placehold.it/45x45" class="school__image">
        <div class="school__details">
          <div class="school__name">tk-name</div>
          <div class="school__district">tk-district</div>
        </div>
        <div class="school__percentage">-%</div>
      </div>
      <!-- school -->

      <div class="school" data-id="17">
        <img src="http://placehold.it/45x45" class="school__image">
        <div class="school__details">
          <div class="school__name">tk-name</div>
          <div class="school__district">tk-district</div>
        </div>
        <div class="school__percentage">-%</div>
      </div>
      <!-- school -->

      <div class="school" data-id="18">
        <img src="http://placehold.it/45x45" class="school__image">
        <div class="school__details">
          <div class="school__name">tk-name</div>
          <div class="school__district">tk-district</div>
        </div>
        <div class="school__percentage">-%</div>
      </div>
      <!-- school -->

      <div class="school" data-id="19">
        <img src="http://placehold.it/45x45" class="school__image">
        <div class="school__details">
          <div class="school__name">tk-name</div>
          <div class="school__district">tk-district</div>
        </div>
        <div class="school__percentage">-%</div>
      </div>
      <!-- school -->

      <div class="school" data-id="20">
        <img src="http://placehold.it/45x45" class="school__image">
        <div class="school__details">
          <div class="school__name">tk-name</div>
          <div class="school__district">tk-district</div>
        </div>
        <div class="school__percentage">-%</div>
      </div>
      <!-- school -->
    </div>
    <!-- schools -->
  </div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题