[英]disable the .click event after the first use
I am trying to adapt this js code to disable the .click event after you click the button. 我试图调整此js代码以在单击按钮后禁用.click事件。 I am a beginner with js and realy only have a basic understanding.
我是js的初学者,真的只有基本的理解。 I have tried to use an if statement but that didn't work.
我试图使用if语句,但是没有用。
here is the js code: 这是js代码:
var sec = ["30% ENTER KEYCODE: Thirty", "25% ENTER KEYCODE: Twenty-five", "20% ENTER KEYCODE: Twenty","15% ENTER KEYCOVE: Fifteen","10% ENTER KEYCODE: Ten","5% EMTER KEYCODE: Five"];
var offset = 30;
//set default degree (360*5)
var degree = 1800;
//number of clicks = 0
var clicks = 0;
$(document).ready(function(){
/*WHEEL SPIN FUNCTION*/
$('#spin').click(function(){
//add 1 every click
clicks ++;
/*multiply the degree by number of clicks
generate random number between 1 - 360,
then add to the new degree*/
var newDegree = degree*clicks;
var extraDegree = Math.floor(Math.random() * 360) + 1;
totalDegree = newDegree+extraDegree;
var colorIndex = Math.ceil(((totalDegree+30) % 360) / 60) -1;
var colorPrev = colorIndex == 0 ? 5 : colorIndex - 1;
var colorNext = colorIndex == 5 ? 0 : colorIndex + 1;
offset = (extraDegree % 60);
var result = sec[colorIndex];
if(offset == 0) {
result ;
} else if (offset <= 30) {
result ;
} else {
result ;
}
$("#answer").html("Answer: " + result);
/*let's make the spin btn to tilt every
time the edge of the section hits
the indicator*/
$('#wheel .sec').each(function(){
var t = $(this);
var noY = 0;
var c = 0;
var n = 700;
var interval = setInterval(function () {
c++;
if (c === n) {
clearInterval(interval);
}
var aoY = t.offset().top;
console.log(aoY);
/*23.7 is the minumum offset number that
each section can get, in a 30 angle degree.
So, if the offset reaches 23.7, then we know
that it has a 30 degree angle and therefore,
exactly aligned with the spin btn*/
if(aoY < 23.89){
console.log('<<<<<<<<');
$('#spin').addClass('spin');
setTimeout(function () {
$('#spin').removeClass('spin');
}, 100);
}
}, 10);
$('#inner-wheel').css({
'transform' : 'rotate(' + totalDegree + 'deg)'
});
noY = t.offset().top;
});
});
});//DOCUMENT READY
here is the original post that I am trying to adapt https://codepen.io/anon/pen/JGwQva 这是我试图改编的原始帖子https://codepen.io/anon/pen/JGwQva
again I am trying to disable the ability to spin the wheel after you click the spin button. 再次,我试图在单击旋转按钮后禁用旋转滚轮的功能。
If you only want to use it once there is a one()
method that removes listener after first click 如果你只想使用它一次有一个
one()
方法在第一次点击后删除监听器
Change: 更改:
$('#spin').click(function(){
To 至
$('#spin').one('click',function(){
$('#spin').click(function(){
clicks ++;
if (clicks < 1 ) {
//rest of You code and/or reset clicks variable
}
}
also, change click to $('#spin').on('click',function(){}
另外,点击更改为
$('#spin').on('click',function(){}
var clicks = 0;
$(function () {
$('body').on('click', '#spin', function () {
//
if (clicks > 0) {
return false;
}
// write code here for first click
clicks++;
})
})
There are several hints given by other moderators. 其他主持人提供了一些提示。 Anyways, you may try any of these, lets if this helps.
无论如何,你可以尝试其中任何一个,如果这有帮助的话。
Simple solution using disabled
attribute comes handy. 使用
disabled
属性的简单解决方案非常方便。
$(function() { $('#spin').click(function() { console.log('clicked..', this); $(this).prop('disabled', true); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="spin">Spin</button>
Solution using $.one
. 解决方案使用
$.one
。
$(function() { $('#spin').one('click', function() { console.log('clicked..', this); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="spin">Spin</button>
Solution using $.on
and $.off
. 使用
$.on
和$.off
$.on
解决方案。
$(function() { $('#spin').on('click', function() { console.log('clicked..', this); $(this).off('click'); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="spin">Spin</button>
Solution using some class names. 解决方案使用一些类名。
$(function() { $('#spin').click(function() { if ($(this).hasClass('hold')) { return; } $(this).addClass('hold'); console.log('clicked..', this); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="spin">Spin</button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.