JS -在switch语句中使用多准则情况

Question

我在switch语句中使用“switch”来处理所获得的不同值。

我遇到的一件事是(下面片段中的虚拟代码)：

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.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;

现在唯一真正的问题是我是"干的“理论的忠实粉丝。以上两种解决方案在某种程度上是“湿的”。

因此，我正试图找到一种更好的方法来编写这段代码，可能是这样的：

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语句。

我不是试图写出所有错误的方法来做事情(我知道它看起来是那样的)，我试图找出正确的方法来做它，也许通过测试所有错误的方法来完成它。

如果有人能用正确的方法帮我做这件事，那将是非常感谢的。

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>

​

Answer 2

你可以这样做：

var config = {
  "1" : {
    "bgColor": "green"
  },
  "2" : {
    "bgColor": "red"
  },
  "2.5" : {
    "color": "white",
    "bgColor": "blue"
  },
  "3" : {
    "color": "lime"
  },
  "3.5" : {
    "color": "cyan",
    "bgColor": "red"
  }
};

document.addEventListener('click', function(e) {
  if (e.target.nodeName === 'BUTTON') {
    var output = document.getElementById('output');
    output.innerHTML += '<div>' + e.target.textContent + '</div>';
    for(var key in config) {
      if(e.target.textContent == key) {
        var obj = config[key];  
        if(obj['color']) {
          output.lastChild.style.color = obj['color'];
        }
        if(obj['bgColor']) {
          output.lastChild.style.backgroundColor = obj['bgColor'];
        }
      }
    }
  }
});

这样，您就可以在需要添加更多选项时编辑数据层(JSON)。您也不需要触摸点击事件。