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')
    });

Answer 2

这可能有所帮助。

function doClickAction() {
   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');
   } 
}
function doDoubleClickAction() {
  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');
  }
}

var timer = 0;
var delay = 200;
var prevent = false;

$("#pixel_canvas")
  .on("click", function() {
    timer = setTimeout(function() {
      if (!prevent) {
        doClickAction();
      }
      prevent = false;
    }, delay);
  })
  .on("dblclick", function() {
    clearTimeout(timer);
    prevent = true;
    doDoubleClickAction();
  });

结合click和dbclick

2 个答案: