javascript - 大家好我想知道它们是否是比我这里的代码更短更干净的 javascript 方式

Question

我制作了一个 div 并将其命名为所选颜色。 下面有很多 div，它们是我的色样。我单击哪个样本将添加我单击的样本的类颜色，并将选择器颜色 div 更改为相同的颜色，并删除分配给该类的以前的颜色。我的js代码很长而且我才刚刚开始学习javascript。我有大约 51 种颜色 我没有添加所有的点击功能，因为它会太长。这是我的代码，谢谢。

function c1(){
	var select = document.getElementById("selectedColour");
	select.classList.remove("cs2", "cs3", "cs4", "cs5", "cs6", "cs7", "cs8", "cs9", "cs10", "cs11", "cs12", "cs13", "cs14", "cs15",
	"cs16", "cs17", "cs18", "cs19", "cs20", "cs21", "cs22", "cs23", "cs24", "cs25", "cs26", "cs27", "cs28", "cs29", "cs30", "cs31", "cs32", "cs33", "cs34",
	"cs35", "cs36", "cs37", "cs38", "cs39", "cs40", "cs41", "cs42", "cs43", "cs44", "cs45", "cs46", "cs47", "cs48", "cs49", "cs50", "cs51");
	select.classList.add("cs1");
}

function c2(){
	var select = document.getElementById("selectedColour");
	select.classList.remove("cs1", "cs3", "cs4", "cs5", "cs6", "cs7", "cs8", "cs9", "cs10", "cs11", "cs12", "cs13", "cs14", "cs15",
	"cs16", "cs17", "cs18", "cs19", "cs20", "cs21", "cs22", "cs23", "cs24", "cs25", "cs26", "cs27", "cs28", "cs29", "cs30", "cs31", "cs32", "cs33", "cs34",
	"cs35", "cs36", "cs37", "cs38", "cs39", "cs40", "cs41", "cs42", "cs43", "cs44", "cs45", "cs46", "cs47", "cs48", "cs49", "cs50", "cs51");
	select.classList.add("cs2");
}

function c3(){
	var select = document.getElementById("selectedColour");
	select.classList.remove("cs1", "cs2", "cs4", "cs5", "cs6", "cs7", "cs8", "cs9", "cs10", "cs11", "cs12", "cs13", "cs14", "cs15",
	"cs16", "cs17", "cs18", "cs19", "cs20", "cs21", "cs22", "cs23", "cs24", "cs25", "cs26", "cs27", "cs28", "cs29", "cs30", "cs31", "cs32", "cs33", "cs34",
	"cs35", "cs36", "cs37", "cs38", "cs39", "cs40", "cs41", "cs42", "cs43", "cs44", "cs45", "cs46", "cs47", "cs48", "cs49", "cs50", "cs51");
	select.classList.add("cs3");
} 

<div id="colour-codes">
				<div id="selectedColour" class="cs1 cs-selected"></div><p style="display: inline-block; transform: translateY(-10px);">= Selected Colour</p>
		<div class="cs cs1" onclick="c1()"></div>
		<div class="cs cs2" onclick="c2()"></div>
		<div class="cs cs3" onclick="c3()"></div>
</div>

Answer 1

用下面的代码替换您的 JavaScript。我已将这三个函数压缩为一个函数，该函数将您希望保留在 classList 中的数字作为其输入。它遍历数字 1 到 51，就像您在代码中手动执行的那样，一个接一个地删除 csNumber 字符串。

function filterCount(filterValue){
  var select = document.getElementById("selectedColour");
  for (i=1; i<52; i++) {
    if (i!=filterValue) {
      select.classList.remove("cs"+filterValue);
    }
  }
  select.classList.add(filterValue);
}

如需在代码中实现此功能，请使用适当的输入调用它:

<div class="cs cs1" onclick="filterCount('1')"></div>
<div class="cs cs2" onclick="filterCount('2')"></div>
<div class="cs cs3" onclick="filterCount('3')"></div>