首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >在第一次使用后禁用.click事件

在第一次使用后禁用.click事件
EN

Stack Overflow用户
提问于 2017-07-22 05:47:51
回答 4查看 438关注 0票数 1

我正在尝试修改这段js代码,以便在您单击按钮后禁用.click事件。我是一个js的初学者,实际上只有一个基本的理解。我曾尝试使用if语句,但这不起作用。

下面是js代码:

代码语言:javascript
复制
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

这是我尝试改编https://codepen.io/anon/pen/JGwQva的原始帖子

我再次尝试禁用在您单击旋转按钮后旋转滚轮的功能。

EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2017-07-22 05:52:25

如果只想使用一次,有一个one()方法可以在第一次单击后删除监听器

更改:

代码语言:javascript
复制
$('#spin').click(function(){

代码语言:javascript
复制
$('#spin').one('click',function(){
票数 3
EN

Stack Overflow用户

发布于 2017-07-22 06:41:10

其他版主给出了几个提示。无论如何,你可以尝试其中的任何一个,如果这有帮助的话让我们来看看。

使用disabled属性的简单解决方案非常方便。

代码语言:javascript
复制
$(function() {
  $('#spin').click(function() {
    console.log('clicked..', this);
    $(this).prop('disabled', true);
  });
});
代码语言:javascript
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="spin">Spin</button>

使用$.one的解决方案。

代码语言:javascript
复制
$(function() {
  $('#spin').one('click', function() {
    console.log('clicked..', this);
  });
});
代码语言:javascript
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="spin">Spin</button>

使用$.on$.off的解决方案。

代码语言:javascript
复制
$(function() {
  $('#spin').on('click', function() {
    console.log('clicked..', this);
    $(this).off('click');
  });
});
代码语言:javascript
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="spin">Spin</button>

使用一些类名的解决方案。

代码语言:javascript
复制
$(function() {
  $('#spin').click(function() {
    if ($(this).hasClass('hold')) {
      return;
    }
    $(this).addClass('hold');
    console.log('clicked..', this);
  });
});
代码语言:javascript
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="spin">Spin</button>

票数 1
EN

Stack Overflow用户

发布于 2017-07-22 05:55:49

代码语言:javascript
复制
$('#spin').click(function(){
    clicks ++;
    if (clicks < 1 ) {
     //rest of You code and/or reset clicks variable
    }
}

另外,将click更改为$('#spin').on('click',function(){}

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/45247157

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档