首页 > 解决方案 > javascript中变量更改时如何运行代码

问题描述

我是编码新手,我试图弄清楚当变量 i 增加时如何让我的代码运行。

当前代码在 i = 1 时执行,如定义 (.q1)。该代码还将变量 i 增加到 2,但是,在下一次单击 .q2 时,代码没有运行,我不知道为什么。

谁能帮助解释为什么代码不能在下一组按钮(i = 2)上运行?

var score = 0
var i = 1

$('.q' + i).on('click', function() {
  if ($(this).is("#correct"))
    $(this).addClass("theright") && ++score;
  else {
    $(this).addClass("thewrong");
  }
  $('.q' + i).attr('disabled', 'disabled') && ++i;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td><button class=q1 id=correct type="button">option 1</button></td>
    <td><button class=q1 type="button">option 2</button></td>
  </tr>
  <tr>
    <td><button class=q1 type="button">option 3</button></td>
    <td><button class=q1 type="button">option 4</button></td>
  </tr>
</table>

<table>
  <tr>
    <td><button class=q2 type="button">option 1</button></td>
    <td><button class=q2 type="button">option 2</button></td>
  </tr>
  <tr>
    <td><button class=q2 id=correct type="button">option 3</button></td>
    <td><button class=q2 type="button">option 4</button></td>
  </tr>
</table>

标签: javascriptjquery

解决方案


您需要在现有的单击处理程序中为 i+1 注册新的单击处理程序。

var score = 0
var i = 1
        
function registerClick() {
  $('.q'+i).on('click', function(){
    if ($(this).is("#correct"))
      $(this).addClass("theright") && ++score;
    else {
      $(this).addClass("thewrong");
    }
    $('.q'+i).attr('disabled', 'disabled') && ++i;
    // register new click handler for ++i
    registerClick(i);
  })
}
    
registerClick();     

问题是您的代码只为 i = 1 分配了一次clickHandler。因此,每次 i 要更改时,您都需要注册一个新的处理程序。


推荐阅读