我在我的switch语句中使用“ multi-criteria cases”来处理我得到的不同值。
我遇到的其中一件事情是（以下代码段中的虚拟代码）：
case '2':
// Don't mind the inline styling, its' only for this example
document.getElementById('output').lastChild.style.color = 'red';
case '2.5':
document.getElementById('output').lastChild.style.color = 'white';
document.getElementById('output').lastChild.style.backgroundColor = 'blue';
break;
我在这里尝试做的是将
2或2.5的背景色设置为蓝色，但仍根据该值唯一地设置文本颜色。唯一的是，就像代码要这样做一样，它用
2的文本颜色覆盖了2.5的文本颜色。到目前为止，我已经解决了两种解决方案。
第一个是：
case '2':
document.getElementById('output').lastChild.style.color = 'red';
document.getElementById('output').lastChild.style.backgroundColor = 'blue';
break;
case '2.5':
document.getElementById('output').lastChild.style.color = 'white';
document.getElementById('output').lastChild.style.backgroundColor = 'blue';
break;
第二个是：
case '2':
document.getElementById('output').lastChild.style.color = 'red';
case '2.5':
if (e.target.textContent === '2.5') {
document.getElementById('output').lastChild.style.color = 'white';
}
document.getElementById('output').lastChild.style.backgroundColor = 'blue';
break;
现在唯一真正的问题是，我是“ DRY”理论的忠实拥护者。以上两个解决方案在某种程度上是“ WET”。
因此，我试图找出一种更好的方式来编写此代码，可能看起来像这样：
case '2':
document.getElementById('output').lastChild.style.color = 'red';
case '2.5':
document.getElementById('output').lastChild.style.color = 'white';
case '2':
case '2.5':
document.getElementById('output').lastChild.style.backgroundColor = 'blue';
break;
（即使这有点“干”）
我了解我的代码在某种程度上会有点“干”，如果有必要，我愿意这样做，我正处于减少我为性能而必须拥有的代码的阶段，想看看我是否可以削减代码以任何可能的方式下降。
这是我的虚拟代码的片段：
document.addEventListener('click', function(e) {
if (e.target.nodeName === 'BUTTON') {
document.getElementById('output').innerHTML += '<div>' + e.target.textContent + '</div>';
switch(e.target.textContent) {
case '1':
// Don't mind the inline styling for this example pls
document.getElementById('output').lastChild.style.backgroundColor = 'green';
break;
case '2':
document.getElementById('output').lastChild.style.color = 'red';
case '2.5':
document.getElementById('output').lastChild.style.color = 'white';
document.getElementById('output').lastChild.style.backgroundColor = 'blue';
break;
case '3':
document.getElementById('output').lastChild.style.color = 'lime';
case '3.5':
if (e.target.textContent === '3.5') {
document.getElementById('output').lastChild.style.color = 'cyan';
}
document.getElementById('output').lastChild.style.backgroundColor = 'red';
break;
}
}
});<button id="b1">1</button>
<button id="b2">2</button>
<button id="b2-5">2.5</button>
<button id="b3">3</button>
<button id="b3-5">3.5</button>
<div id="output"></div>更新
继续，我发现还有另一种方法可以执行，如下所示：
switch(e.target.textContent) {
case '2':
case '2.5':
switch(e.target.textContent) {
case '2':
document.getElementById('output').lastChild.style.color = 'red';
break;
case '2.5':
document.getElementById('output').lastChild.style.color = 'white';
break;
}
document.getElementById('output').lastChild.style.backgroundColor = 'blue';
break;
}
但是，基本上这是两个相同的
switch语句彼此嵌套。我不是在尝试编写所有错误的做事方式（我知道它看起来像那样），而是在尝试找出正确的做事方式，也许是通过测试所有错误的做事方式。
如果有人能以正确的方式帮助我，那将不胜感激。
最佳答案
这可能是一个稍微简化的解决方案。这是您要找的东西吗？
document.addEventListener('click', function(e) {
if (e.target.nodeName === 'BUTTON') {
var elem = document.getElementById('output');
elem.innerHTML += '<div>' + e.target.textContent + '</div>';
var txColor = '',
bgColor = '',
elemStyle = elem.lastChild.style;
switch(e.target.textContent) {
case '1':
bgColor = 'green';
break;
case '2':
txColor = 'red';
case '2.5':
txColor = 'white';
bgColor = 'blue';
break;
default:
bgColor = 'red';
txColor = (e.target.textContent === '3.5') ? 'cyan':'lime';
}
elemStyle.color = txColor;
elemStyle.backgroundColor = bgColor;
}
});<button id="b1">1</button>
<button id="b2">2</button>
<button id="b2-5">2.5</button>
<button id="b3">3</button>
<button id="b3-5">3.5</button>
<div id="output"></div>关于javascript - JS-在switch语句中使用多条件案例，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39521992/