Question

我正在尝试调整此js代码以在单击按钮后禁用.click事件。我是js的初学者，真的只有基本的理解。我试图使用if语句但是没有用。

这是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

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

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

Answer 1

如果您只想在第一次点击后删除侦听器的one()方法时使用它

变化：

$('#spin').click(function(){

要

$('#spin').one('click',function(){

Answer 2

$('#spin').click(function(){
    clicks ++;
    if (clicks < 1 ) {
     //rest of You code and/or reset clicks variable
    }
}

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

Answer 3

File "C:/Users/admin/PycharmProjects/World/My projects/Euler #1.py", line 
15, in <module>
    multiples_of_three()
  File "C:/Users/admin/PycharmProjects/World/My projects/Euler #1.py", line 
10, in multiples_of_three
    high = (max(three))
TypeError: '>' not supported between instances of 'str' and 'int'

Answer 4

其他版主提供了一些提示。无论如何，你可以尝试其中任何一个，如果这有帮助的话。

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

＆＃13;

$(function() {
  $('#spin').click(function() {
    console.log('clicked..', this);
    $(this).prop('disabled', true);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="spin">Spin</button>

＆＃13;

使用$.one解决方案。

＆＃13;

$(function() {
  $('#spin').one('click', function() {
    console.log('clicked..', this);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="spin">Spin</button>

＆＃13;

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

＆＃13;

$(function() {
  $('#spin').on('click', function() {
    console.log('clicked..', this);
    $(this).off('click');
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="spin">Spin</button>

＆＃13;

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

＆＃13;

$(function() {
  $('#spin').click(function() {
    if ($(this).hasClass('hold')) {
      return;
    }
    $(this).addClass('hold');
    console.log('clicked..', this);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="spin">Spin</button>

＆＃13;

首次使用后禁用.click事件

4 个答案: