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事件，以便在用户在方格中输入信息后进行计算）：

$('.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);
  }
};

您还可以将事件目标传递给您的calculate函数，如下所示。我会考虑通过将输入id更改为仅数字（例如，将#input_item24更改为24），然后通过将click目标传递给calculate函数来使用它来检查答案数组来进一步简化事情：

$('.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);
  }
};

具有“ this”变量的抽象

1 个答案: