在 jquery removeClass 倒计时之后重新开始
After jquery removeClass countdown anyway start again
点击 div 会发生一些事情,我还从 div 中删除了 class,这样如果我再次点击 div 就什么也不会发生.但是尽管 class 不在了,下一次点击也会启动一个 jQuery 函数。
我想要一个按钮点击然后发生:
- 一个。 div 将在 x 秒后隐藏
- b。另一个 div 将显示在 x 之后
秒
- c。倒计时显示,何时会发生变化
那会很管用。
如果我先点击按钮 1,倒计时应该开始(确实如此)。
如果我再次单击按钮 1,倒计时不应再次开始。
(但确实如此 - 虽然我在第一次点击时删除了选择器 class)
如何避免倒计时再次开始?
$('.button1').click(function() {
$('.output0').delay(10000).fadeOut(500);
$('.output1').delay(10500).show(0);
});
$('.button1').click(function() {
$('.button1').removeClass('button1');
});
(function($) {
$.fn.countTo = function(options) {
// merge the default plugin settings with the custom options
options = $.extend({}, $.fn.countTo.defaults, options || {});
// how many times to update the value, and how much to increment the value on each update
var loops = Math.ceil(options.speed / options.refreshInterval),
increment = (options.to - options.from) / loops;
return $(this).each(function() {
var _this = this,
loopCount = 0,
value = options.from,
interval = setInterval(updateTimer, options.refreshInterval);
function updateTimer() {
value += increment;
loopCount++;
$(_this).html(value.toFixed(options.decimals));
if (typeof(options.onUpdate) == 'function') {
options.onUpdate.call(_this, value);
}
if (loopCount >= loops) {
clearInterval(interval);
value = options.to;
if (typeof(options.onComplete) == 'function') {
options.onComplete.call(_this, value);
}
}
}
});
};
$.fn.countTo.defaults = {
from: 0, // the number the element should start at
to: 100, // the number the element should end at
speed: 1000, // how long it should take to count between the target numbers
refreshInterval: 100, // how often the element should be updated
decimals: 0, // the number of decimal places to show
onUpdate: null, // callback method for every time the element is updated,
onComplete: null, // callback method for when the element finishes updating
};
})(jQuery);
$('.button1').click(function() {
jQuery(function($) {
$('.timer').countTo({
from: 10,
to: 0,
speed: 10000,
refreshInterval: 50,
onComplete: function(value) {
console.debug(this);
}
});
});
});
.button {
padding: 30px;
background-color: red;
width: 200px;
}
.output0 {
padding: 30px;
background-color: yellow;
width: 200px;
}
.output1 {
padding: 30px;
background-color: green;
width: 200px;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="button1 button" style="">
Button1 to show something after 10 seconds
</div>
<div class="output0" style="">
I will hide after 10 seconds
</div>
<div class="output1" style="">
I will show after 10 seconds
</div>
<div class="timer"></div>
上
问题是您的 .button1
元素上仍然有一个点击事件侦听器,即使您从中删除了 class。
一个潜在的解决方案是使用 jQuery 的 .one
函数。这将只允许每个元素每个事件类型的事件 运行 一次。
它需要将您的 .click
事件合并到一个函数中,如下所示:
$('.button1').one('click', function(){
$('.output0').delay(10000).fadeOut(500);
$('.output1').delay(10500).show(0);
jQuery(function($) {
$('.timer').countTo({
from: 10,
to: 0,
speed: 10000,
refreshInterval: 50,
onComplete: function(value) {
console.debug(this);
}
});
});
});
点击 div 会发生一些事情,我还从 div 中删除了 class,这样如果我再次点击 div 就什么也不会发生.但是尽管 class 不在了,下一次点击也会启动一个 jQuery 函数。
我想要一个按钮点击然后发生:
- 一个。 div 将在 x 秒后隐藏
- b。另一个 div 将显示在 x 之后 秒
- c。倒计时显示,何时会发生变化
那会很管用。
如果我先点击按钮 1,倒计时应该开始(确实如此)。
如果我再次单击按钮 1,倒计时不应再次开始。
(但确实如此 - 虽然我在第一次点击时删除了选择器 class)
如何避免倒计时再次开始?
$('.button1').click(function() {
$('.output0').delay(10000).fadeOut(500);
$('.output1').delay(10500).show(0);
});
$('.button1').click(function() {
$('.button1').removeClass('button1');
});
(function($) {
$.fn.countTo = function(options) {
// merge the default plugin settings with the custom options
options = $.extend({}, $.fn.countTo.defaults, options || {});
// how many times to update the value, and how much to increment the value on each update
var loops = Math.ceil(options.speed / options.refreshInterval),
increment = (options.to - options.from) / loops;
return $(this).each(function() {
var _this = this,
loopCount = 0,
value = options.from,
interval = setInterval(updateTimer, options.refreshInterval);
function updateTimer() {
value += increment;
loopCount++;
$(_this).html(value.toFixed(options.decimals));
if (typeof(options.onUpdate) == 'function') {
options.onUpdate.call(_this, value);
}
if (loopCount >= loops) {
clearInterval(interval);
value = options.to;
if (typeof(options.onComplete) == 'function') {
options.onComplete.call(_this, value);
}
}
}
});
};
$.fn.countTo.defaults = {
from: 0, // the number the element should start at
to: 100, // the number the element should end at
speed: 1000, // how long it should take to count between the target numbers
refreshInterval: 100, // how often the element should be updated
decimals: 0, // the number of decimal places to show
onUpdate: null, // callback method for every time the element is updated,
onComplete: null, // callback method for when the element finishes updating
};
})(jQuery);
$('.button1').click(function() {
jQuery(function($) {
$('.timer').countTo({
from: 10,
to: 0,
speed: 10000,
refreshInterval: 50,
onComplete: function(value) {
console.debug(this);
}
});
});
});
.button {
padding: 30px;
background-color: red;
width: 200px;
}
.output0 {
padding: 30px;
background-color: yellow;
width: 200px;
}
.output1 {
padding: 30px;
background-color: green;
width: 200px;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="button1 button" style="">
Button1 to show something after 10 seconds
</div>
<div class="output0" style="">
I will hide after 10 seconds
</div>
<div class="output1" style="">
I will show after 10 seconds
</div>
<div class="timer"></div>
问题是您的 .button1
元素上仍然有一个点击事件侦听器,即使您从中删除了 class。
一个潜在的解决方案是使用 jQuery 的 .one
函数。这将只允许每个元素每个事件类型的事件 运行 一次。
它需要将您的 .click
事件合并到一个函数中,如下所示:
$('.button1').one('click', function(){
$('.output0').delay(10000).fadeOut(500);
$('.output1').delay(10500).show(0);
jQuery(function($) {
$('.timer').countTo({
from: 10,
to: 0,
speed: 10000,
refreshInterval: 50,
onComplete: function(value) {
console.debug(this);
}
});
});
});