将 JavaScript 转换并优化为 jQuery

Question

我需要将此 JavaScript 函数转换为 jQuery 并对其进行优化。

const sprHundredMan = 9.58,
  sprHundredWoman = 10.49,
  sprTwoHundredMan = 19.19,
  sprTwoHundredWoman = 21.34,
  sprFourHundredMan = 43.03,
  sprFourHundredWoman = 47.60,
  longJpMan = 8.95,
  longJpWoman = 7.52,
  highJpMan = 2.45,
  highJpWoman = 2.09;

document.getElementById('button-calc').addEventListener('click', function     (e) {
  let myResult = document.getElementById('result').value;
  e.preventDefault();

  if (document.getElementById('male').checked &&     document.getElementById('sprint').value == '100') {
    let score = sprHundredMan / myResult * 100
    document.getElementById('perf').value = score.toFixed(2);
  } else if (document.getElementById('male').checked &&      document.getElementById('sprint').value == '200') {
    let score = sprTwoHundredMan / myResult * 100
    document.getElementById('perf').value = score.toFixed(2);
  } else if (document.getElementById('male').checked &&    document.getElementById('sprint').value == '400') {
    let score = sprFourHundredMan / myResult * 100
    document.getElementById('perf').value = score.toFixed(2);
  } else if (document.getElementById('female').checked &&    document.getElementById('sprint').value == '100') {
    let score = sprHundredWoman / myResult * 100
    document.getElementById('perf').value = score.toFixed(2);
  } else if (document.getElementById('female').checked &&     document.getElementById('sprint').value == '200') {
    let score = sprTwoHundredWoman / myResult * 100
    document.getElementById('perf').value = score.toFixed(2);
  } else if (document.getElementById('female').checked &&     document.getElementById('sprint').value == '400') {
    let score = sprFourHundredWoman / myResult * 100
    document.getElementById('perf').value = score.toFixed(2);
  } else if (document.getElementById('male').checked &&     document.getElementById('jump').value == 'Long Jump') {
    let score = myResult / longJpMan * 100
    document.getElementById('perf').value = score.toFixed(2);
  } else if (document.getElementById('female').checked &&     document.getElementById('jump').value == 'Long Jump') {
    let score = myResult / longJpWoman * 100
    document.getElementById('perf').value = score.toFixed(2);
  } else if (document.getElementById('male').checked &&     document.getElementById('jump').value == 'High Jump') {
    let score = myResult / highJpMan * 100
    document.getElementById('perf').value = score.toFixed(2);
  } else if (document.getElementById('female').checked &&     document.getElementById('jump').value == 'High Jump') {
    let score = myResult / highJpWoman * 100
    document.getElementById('perf').value = score.toFixed(2);
  }

});

我尝试用 $ 更改 getElementById 并用 .on 更改 addEventListener 但它不起作用，我不知道如何优化它。我是初学者，如果有人帮助我，我会很高兴。谢谢你。

Answer 1

首先，无论哪种语言，如果您发现自己使用 >2 if-else 链，请使用 switch 语句（正如我在下面所做的那样）。这么长的链条让人恼火 reader :)

此外，学习一些 JQuery 基础知识和语法，仅更改 "getElementById with $ and addEventListener with .on" 是行不通的。我已经用 JQuery 选择器更改了您的代码。请参阅运行下面的代码段。

const sprHundredMan = 9.58,
  sprHundredWoman = 10.49,
  sprTwoHundredMan = 19.19,
  sprTwoHundredWoman = 21.34,
  sprFourHundredMan = 43.03,
  sprFourHundredWoman = 47.60,
  longJpMan = 8.95,
  longJpWoman = 7.52,
  highJpMan = 2.45,
  highJpWoman = 2.09;

$("#button-calc").click(function() {

  let isMale = $('#male').is(':checked');
  let isFemale = $('#female').is(':checked');
  let score = 0;
  let sprint = $("#sprint").val();
  let jump = $("#jump").val();

  if (isMale) {
    score = (sprint) ? getSprintScore(sprint, sprHundredMan, sprTwoHundredMan, sprFourHundredMan) :
      getJumpScore(jump, longJpMan, highJpMan);
  } else if (isFemale) {
    score = (sprint) ? getSprintScore(sprint, sprHundredWoman, sprTwoHundredWoman, sprFourHundredWoman) :
      getJumpScore(jump, longJpWoman, highJpWomann);
  } else
    score = 0;
  $("#perf").val(score.toFixed(2));
});

var getSprintScore = function(sprint, sprHundred, sprTwoHundred, sprFourHundred) {
  let myResult = $("#result").val();
  let scoreSprint = 0;
  switch (sprint) {
    case '100':
      scoreSprint = sprHundred / myResult * 100;
      break;
    case '200':
      scoreSprint = sprTwoHundred / myResult * 100;
      break;
    case '400':
      scoreSprint = sprFourHundred / myResult * 100;
      break;
    default:
      scoreSprint = 0;
  }
  return scoreSprint;
};

var getJumpScore = function(sprint, longJp, highJp) {
  let myResult = $("#result").val();
  return (jump === 'Long Jump') ? myResult / longJpMan * 100 : score = myResult / highJpMan * 100;
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="male" type="radio" name="gender" value="male" checked="checked">
<label for="radio1">Male</label>
<input id="female" type="radio" name="gender" value="female">
<label for="radio2">Female</label>
<br/> Sprint: <input type="number" id="sprint">
<br/> Jump: <input type="number" id="jump">
<br/> Result: <input type="number" id="result">
<hr/>
<button id="button-calc">Compute score</button>
<input type="number" id="perf">

将 JavaScript 转换并优化为 jQuery

Convert and Optimize JavaScript to jQuery

helpers