细胞不会保持颜色

Question

我使用jQuery创建了一个像素艺术品制造商，并添加了在使用“擦除”模式后重新进入默认“绘图”模式的功能。它可以为多个单元格着色，但是我为单个单元格着色的代码不起作用。

如果你：

1. 使用“填充”按钮用颜色填充网格
2. 点击“删除”并删除一个单元格
3. 点击“绘制”并尝试为已删除的单元格着色

细胞填充颜色一瞬间然后再次清除。 但是，如果您只是在页面加载并单击一个单元格后单击绘图模式，它将正常着色。

这是我使用的代码（另一个函数的一部分）。要查看我的完整代码/了解其工作原理，您可以查看我的CodePen。

  $('td').click(function() {
  // Adds chosen color to cell upon a click event. Selector 'this' refers to cell (with class 'Cell') being clicked. Variable 'color' is defined here rather than globally so JS checks whether a new color has been picked before each mousedown event
    const color = $('.color-picker').val();
    $(this).css('background-color', color);
  });

Answer 1

每次模式更改时，您都会添加侦听器，而不会删除以前的模式 - 例如，您可以mousedown，触发绘制框，然后立即调用删除框的处理程序。

您应该尝试重构代码，以便在模式更改时删除以前的侦听器。

Answer 2

您需要断开连接，例如

$(pixelCanvas).on('click', 'td', function() {
  $(this).removeAttr('style');
});

关闭erase工具时。

Answer 3

＆＃13;

＆＃13;

var color=""; 
var type=0;
$(function()
{
	$("tr td").css({"width":"100px","cursor":"pointer"});	
	
});
$("document").ready(function()
{
	$("td").click( function()
    {
		if(type==1)
			$(this).css("background-color","");
		else if(type==2)
			$(this).css("background-color",color);
	});
	
	$("#txtColor").click( function()
    {
		setP();
	});
	
	$("#txtColor").change( function()
	{
		color=$(this).val();
		setP();
	});
	$("#btnR").click( function()
    {
		type=1;
		setP();
	});
	$("#btnD").click( function()
    {
		type=2;
		setP();
	});
	
});
function setP()
{
	var text="";
	if(color.length>0)
		text+="Current Select Color : "+color;
	else
		text+="Select Color";
	
	text+="<br>";
	
	if(type==1)
		text+="Select Earase";
	else if(type==2)	
		text+="Select Draw";
		
		
	$("p").html(text);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div align="center">
<p></p>
<table border="1">
    <tr>
        <td>00 click here</td>
        <td>01 click here</td>
    </tr>
    <tr>
        <td>10 click here</td>
        <td>11 click here</td>
    </tr>
    <tr>
        <td>20 click here</td>
        <td>21 click here</td>
    </tr>
    <tr>
        <td>30 click here</td>
        <td>31 click here</td>
    </tr>
    <tr>
        <td>40 click here</td>
        <td>41 click here</td>
    </tr>
    <tr>
        <td>50 click here</td>
        <td>51 click here</td>
    </tr>
</table>


	<input id="txtColor" type="color">
    <input id="btnR" type="button" value="earase">
    <input id="btnD" type="button" value="draw">

</div>

＆＃13;

＆＃13;

＆＃13;