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的文字颜色，文字颜色为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个语句。

我不是想写所有错误的做事方式（我知道它看起来像那样），我试图找出正确的方法去做，也许是通过测试所有错误的方法来做它。

如果有人能以正确的方式帮助我，那将非常感激。

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）。您也不需要触摸点击事件。

JS - 在switch语句中使用多标准案例

到目前为止，我已经解决了两个问题。

更新

2 个答案: