javascript - 结合点击和 dbclick

Question

我应该如何将以下脚本组合成一个单一的工作脚本？ 当用户拾取的颜色出现时单击 ，再次单击颜色变为白色，双击时出现浅绿色。代码太长，我试着把它们组合起来，但我弄错了。

//single click
$('#pixel_canvas').on('click', 'td', function () {
    var color = $('#colorPicker').val();
    if ($(this).hasClass("blank") == true) {
        $(this).css('background-color', color);
        $(this).removeClass('blank');
    }
    else {
        $(this).addClass('blank');
        $(this).css('background-color', 'white');
    }
});
//double click
$('#pixel_canvas').on('dblclick', 'td', function () {
    var color = $('#colorPicker').val();
    if ($(this).hasClass("blank") == true) {
        $(this).css('background-color', color);
        $(this).removeClass('blank');
    }
    else {
        $(this).addClass('blank');
        $(this).css('background-color', 'aqua');
    }
});

Answer 1

我会这样做:

// Take your actual 'core' code and turn it into a jQuery function:
$.fn.setColor(colorOff){
    if( $(this).hasClass("blank") ){
        $(this)
            .css('background-color', $('#colorPicker').val())
            .removeClass('blank');
    } else{
        $(this)
            .addClass('blank')
            .css('background-color',colorOff);
    }
}

// Now bind the events to the element and pass the color needed for the events:
$('#pixel_canvas')
    .on('click','td',function(){
        $(this).setColor('white')
    })
    .on('dblclick','td',function(){
        $(this).setColor('aqua')
    });