隐藏/显示画布上的更改按钮属性

Question

在学习的同时，我会继续回顾我所做的事情，以便正确理解，做出改变和改进。目前，我正在查看我的隐藏/显示功能。

我有3个按钮，可以控制各自画布的可见性。 我的代码看起来像这样：

    function toggleRedDot(){
        document.getElementById('btnRed').click(); {
            if(canvas.style.visibility=='hidden'){
                canvas.style.visibility='visible';
                btnRed.style.color='Red';
            }else{
                canvas.style.visibility='hidden';
                btnRed.style.color='Black';
            }
        }
    };

除按钮颜色外，绿色和蓝色切换功能都相同。我的项目实际上有7个按钮和画布。我试图将所有这些功能都归为1，现在就是我所拥有的：

    function toggle_visibility(id) 
    {
        var ele = document.getElementById(id);
        if (ele.style.visibility == 'hidden')
        {
            ele.style.visibility = 'visible';
        }
        else 
        {
            ele.style.visibility = 'hidden';                
        }
    }

我一直无法弄清楚如何更改相应的按钮颜色属性。我们的想法是按钮看起来就像在＆＃39;当画布可见时，当“关闭”时颜色会恢复为黑色。

我也需要答案只需javascript，因为这就是我正在学习的内容。 我也希望对我的drawDots函数做类似的事情，因为它们在类和位置上也有所不同。谢谢。

我做了一个片段：

＆＃13;

＆＃13;

		var canvas = document.getElementById('redDot');
		var ctxR = canvas.getContext('2d');
		var canvas1 = document.getElementById('greenDot');
		var ctxG = canvas1.getContext('2d');
		var canvas2 = document.getElementById('blueDot');
		var ctxB = canvas2.getContext('2d');

		var cw = canvas.width;
		var ch = canvas.height;

		drawDots();

		function toggle_visibility(id) {
		  var ele = document.getElementById(id);
		  if (ele.style.visibility == 'hidden') {
		    ele.style.visibility = 'visible';
		  } else {
		    ele.style.visibility = 'hidden';
		  }
		}

		function drawDots() {

		  //			Red Dot
		  ctxR.clearRect(0, 0, cw, ch);
		  ctxR.save();
		  ctxR.translate(cw / 2, ch / 2);
		  ctxR.beginPath();
		  ctxR.arc(-50, 0, 10, 0, 2 * Math.PI);
		  ctxR.closePath();
		  ctxR.fillStyle = 'Red';
		  ctxR.fill();
		  ctxR.restore();

		  //			Green Dot
		  ctxG.clearRect(0, 0, cw, ch);
		  ctxG.save();
		  ctxG.translate(cw / 2, ch / 2);
		  ctxG.beginPath();
		  ctxG.arc(0, 0, 10, 0, 2 * Math.PI);
		  ctxG.closePath();
		  ctxG.fillStyle = 'Green';
		  ctxG.fill();
		  ctxG.restore();

		  //			Blue Dot
		  ctxB.clearRect(0, 0, cw, ch);
		  ctxB.save();
		  ctxB.translate(cw / 2, ch / 2);
		  ctxB.beginPath();
		  ctxB.arc(50, 0, 10, 0, 2 * Math.PI);
		  ctxB.closePath();
		  ctxB.fillStyle = 'Blue';
		  ctxB.fill();
		  ctxB.restore();
		};

＆＃13;

#wrapper {
  position: relative;
}
canvas {
  position: absolute;
  border: 1px solid red;
}
.red {
  color: Red;
}
.green {
  color: Green;
}
.blue {
  color: Blue;
}

＆＃13;

<div id="btnWrapper">
  <button id="btnRed" class="red" title="Toggle Red Dot" onclick="toggle_visibility('redDot')">&#9737;</button>
  <button id="btnGreen" class="green" title="Toggle Green Dot" onclick="toggle_visibility('greenDot')">&#9737;</button>
  <button id="btnBlue" class="blue" title="Toggle Blue Dot" onclick="toggle_visibility('blueDot')">&#9737;</button>
</div>
<div id="wrapper">
  <canvas id="redDot" width="200" height="100"></canvas>
  <canvas id="greenDot" width="200" height="100"></canvas>
  <canvas id="blueDot" width="200" height="100"></canvas>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

有很多方法可以解决这个问题。我选择的方式只是将按钮的id和画布的id传递给toggle_visibility。我还添加了一个小对象，以便可以通过按钮ID查找按钮的颜色。

未来需要考虑的事项：

• 因为DOM读/写有点贵，所以考虑一次读DOM并将元素存储在JS端
• 考虑在JS中使用JS中的addEventListener而不是onclick
  • 您的标记会更清晰
  • 您不必传递btnRed和redDot等参数，因为事件侦听器会收到一个知道哪个元素触发事件的事件
• 不要直接在JS中操作可见性/颜色，而是让CSS类（或多个类）做你想做的事情，然后改变类。

祝你好运！ ：）

＆＃13;

＆＃13;

var canvas = document.getElementById('redDot');
var ctxR = canvas.getContext('2d');
var canvas1 = document.getElementById('greenDot');
var ctxG = canvas1.getContext('2d');
var canvas2 = document.getElementById('blueDot');
var ctxB = canvas2.getContext('2d');

var cw = canvas.width;
var ch = canvas.height;

drawDots();

var buttonIdToColor = {
  btnRed:   'red',
  btnGreen: 'green',
  btnBlue:  'blue'
};

function toggle_visibility(buttonId, dotId) {
  var button = document.getElementById(buttonId)
  var dot    = document.getElementById(dotId);

  if (dot.style.visibility == 'hidden') {
    dot.style.visibility = 'visible';
    button.style.color   = buttonIdToColor[buttonId];
  } else {
    dot.style.visibility = 'hidden';
    button.style.color   = 'black';
  }
}

function drawDots() {

  //      Red Dot
  ctxR.clearRect(0, 0, cw, ch);
  ctxR.save();
  ctxR.translate(cw / 2, ch / 2);
  ctxR.beginPath();
  ctxR.arc(-50, 0, 10, 0, 2 * Math.PI);
  ctxR.closePath();
  ctxR.fillStyle = 'Red';
  ctxR.fill();
  ctxR.restore();

  //      Green Dot
  ctxG.clearRect(0, 0, cw, ch);
  ctxG.save();
  ctxG.translate(cw / 2, ch / 2);
  ctxG.beginPath();
  ctxG.arc(0, 0, 10, 0, 2 * Math.PI);
  ctxG.closePath();
  ctxG.fillStyle = 'Green';
  ctxG.fill();
  ctxG.restore();

  //      Blue Dot
  ctxB.clearRect(0, 0, cw, ch);
  ctxB.save();
  ctxB.translate(cw / 2, ch / 2);
  ctxB.beginPath();
  ctxB.arc(50, 0, 10, 0, 2 * Math.PI);
  ctxB.closePath();
  ctxB.fillStyle = 'Blue';
  ctxB.fill();
  ctxB.restore();
};

＆＃13;

#wrapper {
  position: relative;
}
canvas {
  position: absolute;
  border: 1px solid red;
}
.red {
  color: Red;
}
.green {
  color: Green;
}
.blue {
  color: Blue;
}

＆＃13;

<div id="btnWrapper">
  <button id="btnRed" class="red" title="Toggle Red Dot" onclick="toggle_visibility('btnRed', 'redDot')">&#9737;</button>
  <button id="btnGreen" class="green" title="Toggle Green Dot" onclick="toggle_visibility('btnGreen', 'greenDot')">&#9737;</button>
  <button id="btnBlue" class="blue" title="Toggle Blue Dot" onclick="toggle_visibility('btnBlue', 'blueDot')">&#9737;</button>
</div>
<div id="wrapper">
  <canvas id="redDot" width="200" height="100"></canvas>
  <canvas id="greenDot" width="200" height="100"></canvas>
  <canvas id="blueDot" width="200" height="100"></canvas>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

正如你所说，有超过3种颜色，我写了一个例子，可以简化乘法按钮的创建。

按钮和画布由它们的颜色唯一标识，因此我使用颜色查询DOM以获取引用，并使用函数闭包（forEach回调函数）来保存所需的引用。

我实际上也会在该函数中创建按钮和画布，但你可能想在html中使用它，所以在添加更多按钮时仍然会有如此乏味的标记。

我没有操作元素样式，而是为按钮添加了DOM类.black，为画布添加了.hide和.show。所以所需要的只是设置元素的类名而不是它们的样式。如果您有一组复杂的样式可以切换，将会更容易。

＆＃13;

＆＃13;

"Red,Green,Blue".split(",").forEach((col,i)=>{
    var col_l = col.toLowerCase();
    var ctx = document.getElementById(col_l+ 'Dot').getContext('2d');
    var btn = document.getElementById("btn"+col);
    btn.title ="Toggle "+col +" Dot" ;
    btn.className = col_l ;
    ctx.canvas.className = "show";
    var cw = ctx.canvas.width;
    var ch = ctx.canvas.height;
    ctx.clearRect(0, 0, cw, ch);
    ctx.fillStyle = col;
    ctx.beginPath();
    ctx.arc(cw/2 -50 + i * 50, ch/2, 10, 0, 2 * Math.PI);
    ctx.fill();
    function toggle(){  // this function has closure over col_l ,ctx, and btn
        if (ctx.canvas.className == 'hide') {
           ctx.canvas.className = "show";
           btn.className = col_l ;
        }else{
           ctx.canvas.className = "hide";
           btn.className = "black";
        }
    }        
    btn.addEventListener("click",toggle);
});

＆＃13;

#wrapper {
  position: relative;
}
canvas {
  position: absolute;
  border: 1px solid red;
}
 /* for canvas hide and show */
.hide {
    visibility : hidden;
}
.show {
    visibility : visible;
}
.red {
  color: Red;
}
.green {
  color: Green;
}
.blue {
  color: Blue;
}
.black {  /* "black" colour button */
  color: Black;
}

＆＃13;

<!-- removed most of the stuff that is better added in code. -->
<div id="btnWrapper">  
  <button id="btnRed">&#9737;</button> 
  <button id="btnGreen">&#9737;</button>
  <button id="btnBlue">&#9737;</button>
</div>
<div id="wrapper">
  <canvas id="redDot" width="200" height="100"></canvas>
  <canvas id="greenDot" width="200" height="100"></canvas>
  <canvas id="blueDot" width="200" height="100"></canvas>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

首先我和Blindman67一起回答我问的一切，谢谢你们两位。不幸的是，我无法在我的项目中使用它。我认为这是因为我简化了我的例子。我做了一个小提琴，但由于某种原因，没有一个按钮可以工作，但它们在我的桌面上在5种不同的浏览器中都可以正常工作。我不知道它有什么问题，但这里是： http://jsfiddle.net/Cyb3rMann/0jhqhm60/

我现在要离开绘制功能，我会再回到那个时候我想。我已经合并了第一个答案，现在我正在尝试添加Class和eventListener。

＆＃13;

＆＃13;

		#btnBar {
			position: relative;
			width: 200px;
		}
 		#viewPort {
			clear: both;
			position: relative;
			width: 200px;
			height: 100px;
			border: 1px solid black;
		}
		canvas {position:absolute;}

		.hide {visibility : hidden;}
		.show {visibility : visible;}

		.tog {float: right;}
		.tog.woodCol {color: Sienna;}
		.tog.oreCol {color: Silver;}
		.tog.goldCol {color: Gold;}

		.tog.offCol {color: Green;}

＆＃13;

	<div id="btnBar">
		<button id="btnGold" class="tog goldCol" title="Toggle Gold" onclick="toggle_visibility('btnGold', 'cvsGold')">&#128178;</button>
		<button id="btnOre" class="tog oreCol" title="Toggle Ore" onclick="toggle_visibility('btnOre', 'cvsOre')">&#127755;</button>
		<button id="btnWood" class="tog woodCol" title="Toggle Wood" onclick="toggle_visibility('btnWood', 'cvsWood')">&#127876;</button>
	</div>
	<div id="viewPort">
		<canvas id="cvsWood" width="200px" height="100px"></canvas>
		<canvas id="cvsOre" width="200px" height="100px"></canvas>
		<canvas id="cvsGold" width="200px" height="100px"></canvas>
	</div>

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;

我有一些Class位工作，offCol至少第一次工作。我也试过了eventListener，因为它似乎涉及1行，这有多难？大声笑！任何进一步的帮助将非常感谢，谢谢。