javascript - 具有 "this"变量的抽象

Question

我正在做一个填字游戏。这是一盒填字游戏的示例:

<div class="grid-item">M
    <input id="input-item24" type = "text" size= "4">
  </div>

  <div class="grid-item-black"></div>
</div>
<button id='total_score'>Click to see score</button>
<div id='display_score'></div>

这是每个框的脚本:

<script
  src="https://code.jquery.com/jquery-3.2.1.js"
  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
  crossorigin="anonymous"></script>
    <script src="script.js"></script>
<script> 
var answers = [];
    answers[2]= 'M';
    answers[3]= 'E';
    answers[4]='A';
    answers[5]= 'L';
    answers[6]= 'B';
    answers[7]= 'E';
    answers[8]='L';
    answers[9]= 'L';
    answers[10]= 'A';
    answers[11]= 'I';
    answers[12]= 'L';
    answers[13]= 'I';
    answers[14]= 'A';
    answers[15]= 'D';
    answers[16]= 'R';
    answers[17]= 'E';
    answers[18]= 'T';
    answers[19]= 'R';
    answers[20]= 'Y';
    answers[21]= 'D';
    answers[22]= 'E';
    answers[23]= 'E';
    answers[24]= 'M';
    var score = 0;
    var total = 0;

我想通过使用“THIS 变量”来计算分数来抽象(浓缩)计算函数。这样，我就不必为每个盒子重复这段代码(有效):

$('#total_score').on('click',calculate);
    function calculate(){

    if($('#input-item21').val()==answers[21]){total = total +1;}
    $('#display_score').html(total);
   };

到目前为止我已经尝试过了，为什么它不起作用？

$('.grid-item').on('click',calculate);

    function calculate (){

      if($(this).html() == '')
      {
        $(this).html(answers);

      if(answers == '#input-item')
        {score = score + 1;};   
      }
      $('#display_score').html(score);}

    };

Answer 1

您应该只需要引用值和 ID，就像这样(我也会将其设为 blur 事件，以便在用户在方 block 中输入信息后进行计算):

$('.grid-item').on('blur',calculate);

function calculate (){
  let input = $(this)[0]

  if(input.value || input.value !== '') {
    let id = /\d+$/.match(input.id)[0];

    if(id && answers[id] === input.value) {
      score++;
    }

    $('#display_score').html(score);
  }
};

您还可以将事件目标传递给您的计算函数，如下所示。我会考虑通过将输入 id 更改为数字(例如 #input_item24 只是 24)来进一步简化事情，然后使用它通过传递点击目标来检查答案数组到计算函数:

$('.grid-item').on('blur', e => { calculate(e.target) });

function calculate (input){
  if(input.value || input.value !== '') {

    if(answers[Number(input.id)] === input.value) {
      score++;
    }

    $('#display_score').html(score);
  }
};