防止来自其他功能的覆盖变量的功能

Question

http://jsfiddle.net/r4skcuaq/1/

我有一个网站可以计算出大学某些专业所需的分数。

第1列包含默认值＆＃39; 0＆＃39; 的主题
第二列包含Level1的默认值＆＃39; 0.5＆＃39; ，Level 2的＆＃39; 1＆＃39;
第3列用于用户输入。

每个专业都有不同的科目值。

问题是，当我选择主题 =＆＃39;历史＆＃39; ， 2级和输入= 100

我得到的结果是每个专业的成绩 75/225 ，而不仅仅是“工商管理”，因为只有＆＃39; BA＆＃39;有：

  

$（＆＃39;。他＆＃39）。VAL（＆＃39; 0.75＆＃39）;

结果应如下所示：

Business Administration = 75/225
Biotechnology = 0/225
Electronics Technology = 0/225
Computer Science = 0/225
Biomedical Engineering 0/225

＆＃13;

＆＃13;

$(document).ready(function() {

  //    Default values for Level 1 and Level 2:

  $('.p0').val('0.5'); //Level 1
  $('.r0').val('1'); // Level 2

  //    Default values "0" for subjects:

  $('.mat').val('0');
  $('.fiz').val('0');
  $('.che').val('0');
  $('.inf').val('0');
  $('.bio').val('0');
  $('.geo').val('0');
  $('.wos').val('0');
  $('.jp').val('0');
  $('.his').val('0');
  $('.jo').val('0');

  //    Input score cannot be > 100

  $('#score0,#score1,#score2').val('0').on('change', function() {
    if ($(this).val() > 100) {

      $(this).val('100')
    }
  });



  $('.typ-kier,.wydz,.pw-sec').hide();

  $('#calculate').click(function() {


    $('.typ-kier,.wydz').show();


    adm(); //Business Administration
    biom(); //Biomedical Engineering
    biot(); //Biotechnology
    elektronika(); //Electronics Technology
    informatyka(); //Computer Science




  });

});

function adm() { //Business Administration

  //    Set subject values for Business Administration:

  $('.mat').val('0.75');
  $('.fiz').val('0.5');
  $('.che').val('0.5');
  $('.inf').val('0.75');
  $('.bio').val('0.5');
  $('.geo').val('0.75');
  $('.wos').val('0.75');
  $('.jp').val('0.75');
  $('.his').val('0.75');
  $('.jo').val('0.75');


  var subject0 = parseFloat($('#subject0').find(':selected').val());
  var subject1 = parseFloat($('#subject1').find(':selected').val());
  var subject2 = parseFloat($('#subject2').find(':selected').val());

  var level0 = parseFloat($('#level0').find(':selected').val());
  var level1 = parseFloat($('#level1').find(':selected').val());
  var level2 = parseFloat($('#level2').find(':selected').val());

  var score0 = parseFloat($('#score0').val());
  var score1 = parseFloat($('#score1').val());
  var score2 = parseFloat($('#score2').val());

  var total0 = parseFloat(subject0 * level0 * score0);
  var total1 = parseFloat(subject1 * level1 * score1);
  var total2 = parseFloat(subject2 * level2 * score2);

  var totalSum = parseFloat(total0 + total1 + total2);

  $(".adm").progressbar({
    value: totalSum,
    max: 225
  });
  $("#adm-label").text("Business Administration " + totalSum + "/225");

  return totalSum;

}

function biom() { //Biomedical Engineering

  //  Set subject values for Biomedical Engineering:

  var mat = $('.mat').val('1');
  var fiz = $('.fiz').val('1');
  var che = $('.che').val('0.75');
  var inf = $('.inf').val('0.75');
  var bio = $('.bio').val('0.75');
  var jo = $('.jo').val('0.25');

  var subject0 = parseFloat($('#subject0').find(':selected').val());
  var subject1 = parseFloat($('#subject1').find(':selected').val());
  var subject2 = parseFloat($('#subject2').find(':selected').val());

  var level0 = parseFloat($('#level0').find(':selected').val());
  var level1 = parseFloat($('#level1').find(':selected').val());
  var level2 = parseFloat($('#level2').find(':selected').val());

  var score0 = parseFloat($('#score0').val());
  var score1 = parseFloat($('#score1').val());
  var score2 = parseFloat($('#score2').val());

  var total0 = parseFloat(subject0 * level0 * score0);
  var total1 = parseFloat(subject1 * level1 * score1);
  var total2 = parseFloat(subject2 * level2 * score2);

  var totalSum = parseFloat(total0 + total1 + total2);

  $(".biom").progressbar({
    value: totalSum,
    max: 225
  });
  $(".biom-label").text("Biomedical Engineering " + totalSum + "/225");

  return totalSum;

}

function biot() { //Biotechnology

  //    Set subjects values for Biotechnology:

  var bio = $('.bio').val('1');
  var che = $('.che').val('1');
  var fiz = $('.fiz').val('1');
  var inf = $('.inf').val('0.5');
  var jo = $('.jo').val('0.25');
  var mat = $('.mat').val('1');

  var subject0 = parseFloat($('#subject0').find(':selected').val());
  var subject1 = parseFloat($('#subject1').find(':selected').val());
  var subject2 = parseFloat($('#subject2').find(':selected').val());


  var level0 = parseFloat($('#level0').find(':selected').val());
  var level1 = parseFloat($('#level1').find(':selected').val());
  var level2 = parseFloat($('#level2').find(':selected').val());


  var score0 = parseFloat($('#score0').val());
  var score1 = parseFloat($('#score1').val());
  var score2 = parseFloat($('#score2').val());


  var total0 = parseFloat(subject0 * level0 * score0);
  var total1 = parseFloat(subject1 * level1 * score1);
  var total2 = parseFloat(subject2 * level2 * score2);


  var totalSum = parseFloat(total0 + total1 + total2);


  $(".biot").progressbar({
    value: totalSum,
    max: 225
  });
  $("#biot-label").text("Biotechnology " + totalSum + "/225");

  return totalSum;

}

function elektronika() { //Electronics Technology

  //    Set subjects values for Electronics Technology:

  var mat = $('.mat').val('1');
  var fiz = $('.fiz').val('1');
  var che = $('.che').val('0.75');
  var inf = $('.inf').val('0.75');
  var bio = $('.bio').val('0.5');
  var jo = $('.jo').val('0.25');

  var subject0 = parseFloat($('#subject0').find(':selected').val());
  var subject1 = parseFloat($('#subject1').find(':selected').val());
  var subject2 = parseFloat($('#subject2').find(':selected').val());


  var level0 = parseFloat($('#level0').find(':selected').val());
  var level1 = parseFloat($('#level1').find(':selected').val());
  var level2 = parseFloat($('#level2').find(':selected').val());


  var score0 = parseFloat($('#score0').val());
  var score1 = parseFloat($('#score1').val());
  var score2 = parseFloat($('#score2').val());


  var total0 = parseFloat(subject0 * level0 * score0);
  var total1 = parseFloat(subject1 * level1 * score1);
  var total2 = parseFloat(subject2 * level2 * score2);


  var totalSum = parseFloat(total0 + total1 + total2);


  $(".elektronika").progressbar({
    value: totalSum,
    max: 225
  });
  $("#elektronika-label").text("Electronics Technology " + totalSum + "/225");

  return totalSum;

}

function informatyka() { //Computer Science

  //    Set subject values for Computer Science:

  $('.mat').val('1');
  $('.fiz').val('1');
  $('.che').val('0.75');
  $('.inf').val('1');
  $('.bio').val('0.5');
  $('.jo').val('0.25');

  var subject0 = parseFloat($('#subject0').find(':selected').val());
  var subject1 = parseFloat($('#subject1').find(':selected').val());
  var subject2 = parseFloat($('#subject2').find(':selected').val());

  var level0 = parseFloat($('#level0').find(':selected').val());
  var level1 = parseFloat($('#level1').find(':selected').val());
  var level2 = parseFloat($('#level2').find(':selected').val());

  var score0 = parseFloat($('#score0').val());
  var score1 = parseFloat($('#score1').val());
  var score2 = parseFloat($('#score2').val());

  var total0 = parseFloat(subject0 * level0 * score0);
  var total1 = parseFloat(subject1 * level1 * score1);
  var total2 = parseFloat(subject2 * level2 * score2);

  var totalSum = parseFloat(total0 + total1 + total2);

  $(".informatyka").progressbar({
    value: totalSum,
    max: 225
  });
  $(".informatyka-label").text("Computer Science " + totalSum + "/225");

  return totalSum;

}

＆＃13;

body {
  text-align: center;
}
.div-center {
  text-align: left;
  background-color: lavender;
  width: 960px;
  margin: 0 auto;
  border: 1px solid blue;
  overflow: hidden
}
header {
  text-align: center;
}
#nameheader {
  text-align: center;
  font-size: 56px;
}
.section1 {
  text-align: center;
}
.table {
  border: 1px solid darkslategray;
  overflow: hidden;
}
.table-colums {
  position: relative;
  text-align: center;
  border: solid greenyellow;
  width: 800px;
  margin: 0 auto;
  overflow: hidden;
}
.col-md-4,
.col-sm-2 {
  float: left;
  border: transparent;
  margin: 5px;
  position: relative;
  clear: none;
  left: 5%;
}
.prog {
  margin-top: 6px;
  list-style: none;
  text-align: center;
  width: 600px;
  position: relative;
}
.prog-label {
  position: absolute;
  left: 5%;
  top: 4px;
  font-weight: bold;
  text-shadow: 1px 1px 0 #fff;
}
#calculate-div {
  position: relative;
  text-align: center;
  height: auto;
  padding: 5px;
  margin: 0 auto;
}
.ui-progressbar.beginning .ui-progressbar-value {
  background: red;
}
.ui-progressbar.middle .ui-progressbar-value {
  background: yellow;
}
.ui-progressbar.end .ui-progressbar-value {
  background: green;
}
.typ-kier {
  font-size: 24px;
  font-weight: bold;
  margin: 18px auto;
}
.wydz {
  font-size: 18px;
  margin: 12px auto;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
  
  <script type='text/javascript' src='//code.jquery.com/jquery-1.11.0.js'></script>

<div class="div-center">

  <header class="header">
    <h1 id="nameheader">Project</h1>
  </header>


  <!--Subjects-->
  <div class="table-colums">

    <div class="col-md-4" id="subject-div">
      <div class="span4" id="1x1">
        <select id="subject0" class="form-control">
          <option value="0"></option>
          <option class="bio" value="0">Biology</option>
          <option class="che" value="0">Chemistry</option>
          <option class="fiz" value="0">Physic</option>
          <option class="geo" value="0">Geography</option>
          <option class="his" value="0">History</option>
          <option class="inf" value="0">Computer Science</option>
          <option class="jo" value="0">Foreign Language</option>
          <option class="jp" value="0">English</option>
          <option class="mat" value="0">Mathematic</option>
          <option class="wos" value="0">WOS</option>
        </select>

      </div>
      <div class="span4" id="1x2">

        <select id="subject1" class="form-control">
          <option value="0"></option>
          <option class="bio" value="0">Biology</option>
          <option class="che" value="0">Chemistry</option>
          <option class="fiz" value="0">Physic</option>
          <option class="geo" value="0">Geography</option>
          <option class="his" value="0">History</option>
          <option class="inf" value="0">Computer Science</option>
          <option class="jo" value="0">Foreign Language</option>
          <option class="jp" value="0">English</option>
          <option class="mat" value="0">Mathematic</option>
          <option class="wos" value="0">WOS</option>
        </select>

      </div>
      <div class="span4" id="1x3">

        <select id="subject2" class="form-control">
          <option value="0"></option>
          <option class="bio" value="0">Biology</option>
          <option class="che" value="0">Chemistry</option>
          <option class="fiz" value="0">Physic</option>
          <option class="geo" value="0">Geography</option>
          <option class="his" value="0">History</option>
          <option class="inf" value="0">Computer Science</option>
          <option class="jo" value="0">Foreign Language</option>
          <option class="jp" value="0">English</option>
          <option class="mat" value="0">Mathematic</option>
          <option class="wos" value="0">WOS</option>
        </select>

      </div>

    </div>

    <!--Level1 and Level 2-->

    <div class="col-md-4" id="level-div">
      <div class="span4" id="2x1">
        <select id="level0" class="form-control">
          <option value="0"></option>
          <option class="p0" value="0">Level 1 (*0,5)</option>
          <option class="r0" value="0">Level 2 (*1)</option>

        </select>
      </div>
      <div class="span4" id="2x2">
        <select id="level1" class="form-control">
          <option value="0"></option>
          <option class="p0" value="0">Level 1 (*0,5)</option>
          <option class="r0" value="0">Level 2 (*1)</option>

        </select>
      </div>
      <div class="span4" id="2x3">
        <select id="level2" class="form-control">
          <option value="0"></option>
          <option class="p0" value="0">Level 1 (*0,5)</option>
          <option class="r0" value="0">Level 2 (*1)</option>

        </select>
      </div>

    </div>

    <!--Scores-->

    <div class="col-sm-2" id="scores-div">
      <div class="span4" id="3x0">
        <input type="text" class="form-control score" id="score0">
      </div>

      <div class="span4" id="3x1">
        <input type="text" class="form-control score" id="score1">
      </div>

      <div class="span4" id="3x2">
        <input type="text" class="form-control score" id="score2">
      </div>



    </div>


  </div>

  <div id="calculate-div">
    <div type="submit" class="btn btn-default" id="calculate">Calculate</div>
  </div>

  <div class="results">


    <div class="prog adm"><span class="prog-label" id="adm-label"></span>
    </div>

    <div class="prog biot"><span class="prog-label" id="biot-label"></span>
    </div>

    <div class="prog tchem"><span class="prog-label" id="tchem-label"></span>
    </div>

    <div class="prog elektronika"><span class="prog-label" id="elektronika-label"></span>
    </div>

    <div class="prog informatyka"><span class="prog-label informatyka-label"></span>
    </div>

    <div class="prog tele"><span class="prog-label" id="tele-label"></span>
    </div>

    <div class="prog biom"><span class="prog-label biom-label"></span>
    </div>
  </div>
</div>
</html>

＆＃13;

＆＃13;

＆＃13;

Answer 1

现在你已经解释了一点，这很有道理。

您没有将未使用的值重置为＆＃34; 0＆＃34;对于给定的计算，所以.his的值从前一次计算结转。

我将您的重置代码移动到另一个功能，因此您可以在为每种类型设置所需的值之前调用它：

function adm() { //Business Administration

    //    Set subject values for Business Administration:
    SetSubjectDefaults();  <<<< ADDED THIS

    $('.mat').val('0.75');
    $('.fiz').val('0.5');
    $('.che').val('0.5');
    $('.inf').val('0.75');
    $('.bio').val('0.5');
    $('.geo').val('0.75');
    $('.wos').val('0.75');
    $('.jp').val('0.75');
    $('.his').val('0.75');
    $('.jo').val('0.75');

    var totalSum = TotalSum();

    $(".adm").progressbar({
        value: totalSum,
        max: 225
    });
    $("#adm-label").text("Business Administration " + totalSum + "/225");

    return totalSum;

}

这个常见功能：

function SetSubjectDefaults() {
    $('.mat').val('0');
    $('.fiz').val('0');
    $('.che').val('0');
    $('.inf').val('0');
    $('.bio').val('0');
    $('.geo').val('0');
    $('.wos').val('0');
    $('.jp').val('0');
    $('.his').val('0');
    $('.jo').val('0');
}

JSFiddle： http://jsfiddle.net/TrueBlueAussie/r4skcuaq/5/

我还将重复的代码重构为函数。使用普通类可以做更多事情，但这会让你前进。例如，你可以结合起来 选择器，或使用另一个公共类：

function SetSubjectDefaults() {
    $('.mat,.fiz,.che,.inf,.bio,.geo,.wos,.jp,.his,.jo').val('0');
}

甚至只是

function SetSubjectDefaults() {
    $('.someCommonClassOnAllTheOptions').val('0');
}