javascript - JS - 在 switch 语句中使用多条件案例

Question

我在 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.5 的文本颜色覆盖了 2 的文本颜色。

---

到目前为止，我已经制定了两个解决方案。

第一个是:

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;

(即使这有点“干”)

I understand that to some degree my code will be a bit "DRY" and I am willing to have that if necessary, I am just at the stage of lessening the code I do have for performance and want to see if I can cut the code down in any way possible.

这是我的虚拟代码的片段:

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 语句嵌套在一起。

我并不想写出所有错误的做事方式(我知道它看起来像那样)，我试图找出正确的做事方式，也许通过测试所有错误的做事方式

如果有人能帮助我以正确的方式做到这一点，那将不胜感激。

Answer 1

这可能是一个稍微简化的解决方案。这是您要找的吗？

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>