javascript - jQuery - 外部变量选择器/函数 - 变量求和

Question

我想我已经很接近了，但我错过了一些东西。没有做正确的事情。这是 JSFiddle 的链接 - JSFiddle Link

这些都是单独工作的，但我需要将第一部分和第二部分一起评估，以确定第三部分的总值(value)。我的第 1 部分需要满足多个条件。我的第 2 部分结果保持为 0，而第 3 部分的总和从未发生。如果我不定义变量，第 1 部分和第 2 部分就可以工作。预先非常感谢您。

<p>
  Part 1
</p>
<label for="pt3c-pt2-q1-cpr_$DropDownChoice">Class 1</label>
<select id="pt3c-pt2-q1-cpr_$DropDownChoice" title="pt3c-pt2-q1-cpr" class="RadioText">
  <option value="False" selected="selected">False</option>
  <option value="True">True</option>
</select><br>
<label for="pt3c-pt2-q1-dot_$DropDownChoice">Class 2</label>
<select id="pt3c-pt2-q1-dot_$DropDownChoice" title="pt3c-pt2-q1-dot" class="RadioText">
  <option value="False" selected="selected">False</option>
  <option value="True">True</option>
</select><br>
<label for="pt3c-pt2-q1-lto_$DropDownChoice">Class 3</label>
<select id="pt3c-pt2-q1-lto_$DropDownChoice" title="pt3c-pt2-q1-lto" class="RadioText">
  <option value="False" selected="selected">False</option>
  <option value="True">True</option>
</select><br>
<label for="pt3c-pt2-q1-other_$TextField">Class 4</label>
<input type="text" value="" maxlength="255" id="pt3c-pt2-q1-other_$TextField" title="pt3c-pt2-q1-other" class="long"><br>
<label for="pt3c-pt2-q1b_$TextField">Result</label>
<input type="text" value="" maxlength="5" id="pt3c-pt2-q1b_$TextField" title="pt3c-pt2-q1b" class="long"><br>

<p>
  Part 2
</p>
<label for="pt3c-pt2-q2_$DropDownChoice">Part 2 : Question</label>
<select id="pt3c-pt2-q2_$DropDownChoice" title="pt3c-pt2-q2" class="RadioText">
  <option value="False" selected="selected">False</option>
  <option value="True">True</option>
</select><br>
<label for="pt3c-pt2-q2b_$TextField">Part 2 : Result</label>
<input type="text" maxlength="5" id="pt3c-pt2-q2b_$TextField" title="pt3c-pt2-q2b" class="long ">

<p>
  Part 3
</p>
<label for="pt3c-pt2-total_$TextField">Total</label>
<input type="text" value="" maxlength="5" id="pt3c-pt2-total_$TextField" title="pt3c-pt2-total" class="long">

$(function() {
  var pt3cpt2q1b = "0";
  var pt3cpt2q2b = "0";
  var pt3cpt2total = "0";

  $("*[title^=pt3c-pt2]").change(function() {
    if ($("select[title='pt3c-pt2-q1-cpr']").val() == "True" ||
      $("select[title='pt3c-pt2-q1-dot']").val() == "True" ||
      $("select[title='pt3c-pt2-q1-lto']").val() == "True" ||
      $("input[title='pt3c-pt2-q1-other']").val().length !== 0) {
      var pt3cpt2q1b = "50";
      $("input[title='pt3c-pt2-q1b']").val(pt3cpt2q1b);
    }
    if ($("select[title='pt3c-pt2-q1-cpr']").val() == "False" &&
      $("select[title='pt3c-pt2-q1-dot']").val() == "False" &&
      $("select[title='pt3c-pt2-q1-lto']").val() == "False" &&
      $("input[title='pt3c-pt2-q1-other']").val().length === 0) {
      var pt3cpt2q1b = "0";
      $("input[title='pt3c-pt2-q1b']").val(pt3cpt2q1b);
    } else {}
  });

  $("select[title='pt3c-pt2-q2']").change(function() {
    if ($("select[title='pt3c-pt2-q2']").val() == "True") {
      var pt3cpt2q2b = "50";
      $("input[title='pt3c-pt2-q2b']").val(pt3cpt2q2b);
    }
    if ($("select[title='pt3c-pt2-q2']").val() == "False") {
      var pt3cpt2q2b = "0";
      $("input[title='pt3c-pt2-q2b']").val(pt3cpt2q2b);
    } else {}
  });

  $("*[title^=pt3c-pt2]").change(function() {
    pt3cpt2total = parseInt(pt3cpt2q1b) + parseInt(pt3cpt2q2b);
    $("input[title='pt3c-pt2-q2b']").val(pt3cpt2total);
  });
});

Answer 1

尝试更新变量而不是在函数中重新定义它们。为了避免此类问题，示例中使用了 let，这样它会告诉您正在尝试重新定义已定义的值，而不仅仅是更新值；

$(function() {
  let pt3cpt2q1b = "0";
  let pt3cpt2q2b = "0";
  let pt3cpt2total = "0";

  $("*[title^=pt3c-pt2]").change(function() {
    if ($("select[title='pt3c-pt2-q1-cpr']").val() == "True" ||
      $("select[title='pt3c-pt2-q1-dot']").val() == "True" ||
      $("select[title='pt3c-pt2-q1-lto']").val() == "True" ||
      $("input[title='pt3c-pt2-q1-other']").val().length !== 0) {
      pt3cpt2q1b = "50";
      $("input[title='pt3c-pt2-q1b']").val(pt3cpt2q1b);
    }
    if ($("select[title='pt3c-pt2-q1-cpr']").val() == "False" &&
      $("select[title='pt3c-pt2-q1-dot']").val() == "False" &&
      $("select[title='pt3c-pt2-q1-lto']").val() == "False" &&
      $("input[title='pt3c-pt2-q1-other']").val().length === 0) {
      pt3cpt2q1b = "0";
      $("input[title='pt3c-pt2-q1b']").val(pt3cpt2q1b);
    } else {}
  });

  $("select[title='pt3c-pt2-q2']").change(function() {
    if ($("select[title='pt3c-pt2-q2']").val() == "True") {
      pt3cpt2q2b = "50";
      $("input[title='pt3c-pt2-q2b']").val(pt3cpt2q2b);
    }
    if ($("select[title='pt3c-pt2-q2']").val() == "False") {
      pt3cpt2q2b = "0";
      $("input[title='pt3c-pt2-q2b']").val(pt3cpt2q2b);
    } else {}
  });

  $("*[title^=pt3c-pt2]").change(function() {
    pt3cpt2total = parseInt(pt3cpt2q1b) + parseInt(pt3cpt2q2b);
    $("input[title='pt3c-pt2-q2b']").val(pt3cpt2total);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
  Part 1
</p>
<label for="pt3c-pt2-q1-cpr_$DropDownChoice">Class 1</label>
<select id="pt3c-pt2-q1-cpr_$DropDownChoice" title="pt3c-pt2-q1-cpr" class="RadioText">
  <option value="False" selected="selected">False</option>
  <option value="True">True</option>
</select><br>
<label for="pt3c-pt2-q1-dot_$DropDownChoice">Class 2</label>
<select id="pt3c-pt2-q1-dot_$DropDownChoice" title="pt3c-pt2-q1-dot" class="RadioText">
  <option value="False" selected="selected">False</option>
  <option value="True">True</option>
</select><br>
<label for="pt3c-pt2-q1-lto_$DropDownChoice">Class 3</label>
<select id="pt3c-pt2-q1-lto_$DropDownChoice" title="pt3c-pt2-q1-lto" class="RadioText">
  <option value="False" selected="selected">False</option>
  <option value="True">True</option>
</select><br>
<label for="pt3c-pt2-q1-other_$TextField">Class 4</label>
<input type="text" value="" maxlength="255" id="pt3c-pt2-q1-other_$TextField" title="pt3c-pt2-q1-other" class="long"><br>
<label for="pt3c-pt2-q1b_$TextField">Result</label>
<input type="text" value="" maxlength="5" id="pt3c-pt2-q1b_$TextField" title="pt3c-pt2-q1b" class="long"><br>

<p>
  Part 2
</p>
<label for="pt3c-pt2-q2_$DropDownChoice">Part 2 : Question</label>
<select id="pt3c-pt2-q2_$DropDownChoice" title="pt3c-pt2-q2" class="RadioText">
  <option value="False" selected="selected">False</option>
  <option value="True">True</option>
</select><br>
<label for="pt3c-pt2-q2b_$TextField">Part 2 : Result</label>
<input type="text" maxlength="5" id="pt3c-pt2-q2b_$TextField" title="pt3c-pt2-q2b" class="long ">

<p>
  Part 3
</p>
<label for="pt3c-pt2-total_$TextField">Total</label>
<input type="text" value="" maxlength="5" id="pt3c-pt2-total_$TextField" title="pt3c-pt2-total" class="long">