Question

所以我试图每秒增加一个数字。到目前为止这个工作正常，但我有一个额外的条件，并没有真正起作用，我不知道为什么。

我想要的是，在值达到10或更多之后，您可以点击div并且该div会发生一些事情，但值也会减少10。我的代码：

var counter = 0;
var increment = 10;
var div = document.getElementById('number');
    var st = setInterval(function(){
    div.innerHTML = ++counter;
    if (counter >= 10){
        jQuery('#red-block').click(function(e) {  
            jQuery(this).css('border-radius','15px');
            counter = counter -10;
        });
    }
  },1000);

#red-block {
  height: 40px;
  width: 40px;
  background-color: #ff0000;
  display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="number">1</div>

<div id="red-block"></div>

问题是，在计数器点击10后我点击，div会改变，但值会跳转到例如-17，而且我可以根据需要多次点击div，每次都会减少很多。这应该只有在每次计数器达到10时才有可能。任何人都有解决方案，我做错了什么？我认为这与setInterval

有关

Answer 1

这是因为您在setInterval函数中注册了一个新的单击事件处理程序。将点击注册移到setInterval之外功能

var counter = 0;
var increment = 10;

jQuery('#red-block').click(function (e) {
    if (counter >= 10) {
        jQuery(this).css('border-radius', '15px');
        counter = counter - 10;
    }
});
var div = document.getElementById('number');
var st = setInterval(function () {
    div.innerHTML = ++counter;
}, 1000);

Answer 2

将其与setInterval函数分开，然后将if语句放在click函数

中

   jQuery('#red-block').click(function(e) {  
        if (counter >= 10){
            jQuery(this).css('border-radius','15px');
            counter = counter -10;
        }
   });

＆＃13;

var counter = 0;
var increment = 10;
var div = document.getElementById('number');
var st = setInterval(function(){
div.innerHTML = ++counter;
},1000);

jQuery('#red-block').click(function(e) { 
    if (counter >= 10){
        jQuery(this).css('border-radius','15px');
        counter = counter -10;
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="number">1</div>
<div id="red-block">Click Me</div>

＆＃13;

Answer 3

问题是：

您每次都在注册click事件处理程序定时器功能运行，因此单击将触发回调功能多次。只需注册一次即可回调，检查是否应该调整计数。
即使将计数器减少10，它仍会增加1。相反，只需跟踪您更改计数的金额（1或 -10）并根据当前“更改依据”值更新输出。

此外，既然您正在使用jQuery，请继续使用它（您已经采取了尝试）。

另外（仅供参考），如果您没有设置任何HTML，请不要使用.innnerHTML，请使用.textContent。而且，由于您使用的是jQuery，因此可以使用.text()代替.textContent。

// Here's the jQuery way to get a reference to elements by their id's:
var $div = $('#number');   
var $block = $('#red-block')

var counter = 1; // This will be the amount to change by
var count = 0;   // This will be the current count at any given time

// Just set up the click event handler once, not every time the interval runs
$block.on("click", function(e) {  
  // But only do something if the count is right
  if (count >= 10){
    $(this).css('border-radius','15px');
    counter = -10;
  }
});
  
var st = setInterval(function(){  
  // Now, just adjust the count by the counter 
  count = count += counter;
  $div.text(count); // <-- The jQuery way to set the text of an element  
  
}, 1000);

#red-block {
  height: 40px;
  width: 40px;
  background-color: #ff0000;
  display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="number">1</div>

<div id="red-block"></div>

jQuery - 每秒增加数字但是减少onclick

3 个答案: