【jQuery】.one について

by tea4two

HTML

<div id="click">
    click me!
</div>

<div id="clickoff">
    off!
</div>

CSS

#click {
    cursor: pointer;
    padding: 10px;
    background-color: red;
}
#click.on {
    background-color: yellow;
}

#clickoff {
        cursor: pointer;
    background-color: blue;
    color: #fff;
}

JavaScript

var counter = 0;
$('#click').one('click',function(e) {
    counter++;
    console.log(counter + '回目のクリック');
    $(this).addClass('on');
    
    e.preventDefault();
    
});


function recover() {
    console.log('回復しました！');
    clickable();
}

function clickable() {
    $('#clickoff').on('click',function(e) {
        console.log('click off?');
        $(this).css('background-color','purple');
        $(this).off('click');
        
        setTimeout(recover,3000);
        e.preventDefault();
    });
}
clickable();