Question

我有一个按钮，在每次点击时，为变量添加1。当此变量高于5时，将触发警报。但是，在此之后，触发器仍然会持续激活。我已经尝试使用==进行检查而不是＆gt; ，但它做同样的事情。有什么想法吗？

// Declare the variable
  var generic_counter = 0;
  // Log the variable
  console.log(generic_counter);    
  // When button is clicked, add 1 to the variable
  $(document).ready(function() {
    $(".generic").click(function(add_generic) {
      if (generic_counter > 5) {
        alert("You've been looking up a lot about GENERIC, maybe contact this group?")
      } else {
        generic_counter += 1;
        console.log(generic_counter);
      }
    });
  });

Answer 1

如果您使用==（或===）进行比较，并且始终增加计数器，则仅在第六次点击时发出提醒。

注意：在ready事件处理程序中声明变量，它不需要是全局变量。

// When button is clicked, add 1 to the variable
$(document).ready(function() {

  // Declare the variable
  var generic_counter = 0;
  // Log the variable
  console.log(generic_counter);    

  $(".generic").click(function() {
    generic_counter++;
    console.log(generic_counter);
    if (generic_counter == 6) {
      alert("You've been looking up a lot about GENERIC, maybe contact this group?");
    }
  });

});

如果您不想继续计数，也可以在显示更改后使用off方法取消注册事件处理程序：

// When button is clicked, add 1 to the variable
$(document).ready(function() {

  // Declare the variable
  var generic_counter = 0;
  // Log the variable
  console.log(generic_counter);    

  $(".generic").click(function() {
    generic_counter++;
    console.log(generic_counter);
    if (generic_counter == 6) {
      alert("You've been looking up a lot about GENERIC, maybe contact this group?");
      $(".generic").off('click');
    }
  });

});

对于更通用的解决方案，您可以制作插件：

$.fn.clickUntil(cnt, message) {
  var elements = this;
  return this.click(function(){
    if (--cnt == 0) {
      alert(message);
      elements.off('click');
    }
  });
}

然后，您可以轻松地为多个元素发送消息。例如：

$(document).ready(function() {
  var items = [
    { selector: '.generic', name 'GENERIC' },
    { selector: '.super', name 'SuPeR' },
    { selector: '.mordor', name 'M0rd0r' }
  ];
  $.each(items, function(i, o){
    $(o.selector).clickUntil(6, 'You've been looking up a lot about ' + o.name + ', maybe contact this group?');
  });
});

Answer 2

创建一个只能触发一次的通用警报对象。这样，您可以使用一种方法为每种方法生成多个通用消息。维护也更容易，因为您可以将所有消息存储在一个位置而不是代码中的不同位置。

OneTimeAlert = function(theMessage) {
    this.display = theMessage;
    this.triggered = false;
}
OneTimeAlert.prototype.trigger = function() {
    if(!this.triggered) {
        window.alert(this.display);
        this.triggered = true;
    }
}
GenericAlert = new OneTimeAlert("You're certainly interested in GENERIC, maybe you would like to get in touch with BUDDIES");
var generic_counter = 0;
// Log the variable
console.log(generic_counter);    
// When button is clicked, add 1 to the variable
$(document).ready(function() {
  $(".generic").click(function(add_generic) {
   if (generic_counter > 5) {
      GenericAlert.trigger();
   } else {
     generic_counter += 1;
     console.log(generic_counter);
   }
 });
});

Answer 3

您可以在if语句中添加.off函数。

 $(".generic").click(function(add_generic) {
      if (generic_counter >= 5) {
        alert("You've been looking up a lot about GENERIC, maybe contact this group?")
        $(".generic").off("click");
      } else {
        generic_counter += 1;
        console.log(generic_counter);
      }
    });

http://jsfiddle.net/1345qam8/3/

Answer 4

尝试在警报中添加$('.generic').off('click');。如果需要，还可以尝试＆gt; =进行测试：）

See your edited fiddle here

Answer 5

您必须使用一个变量来检查该条件：

  // Declare the variable
  var generic_counter = 0;
  var reached = false;
  // Log the variable
  console.log(generic_counter);
  // When button is clicked, add 1 to the variable
  $(document).ready(function() {
    $(".generic").click(function(add_generic) {
      if (generic_counter > 5) {
          if ( !reached ) {
        alert("You've been looking up a lot about GENERIC, maybe contact this group?")
        reached = true;
          }
      } else {
        generic_counter += 1;
        console.log(generic_counter);
      }
    });
  });


// So we have the thing counting up to 6 clicks, and then saying "blah"
// However, this keeps happening afterwards, so what we need is..
// The function needs to STOP when it reaches over 5

http://jsfiddle.net/1345qam8/2/

达到IF条件后停止功能

5 个答案: