避免在 jquery 中进行二分类切换的最佳实践答案

【问题标题】：Best practice to avoid dichotomic class switching in jquery避免在 jquery 中进行二分类切换的最佳实践
【发布时间】：2018-07-21 10:09:28
【问题描述】：

我在 javascript 类中编写了一个方法。如果相同的 div 包含类 right，则该方法将按下的 div 着色为绿色，如果它包含类 wrong，则将其着色为红色。该函数（或方法）通过另一个名为 bg-* 的类（+引导命名法成功、危险等）作为其背景颜色。

代码如下：

this.clickedOnAnswer = function(clickedAnswer) {
    $('#' + clickedAnswer).not($('.wrong')).removeClass('bg-light text-dark').addClass('bg-success text-white');
    $('#' + clickedAnswer).not($('.right')).removeClass('bg-light text-dark').addClass('bg-danger text-white');
}

虽然它确实有效，但我讨厌重复的代码。如何以更优雅的方式做到这一点？

【问题讨论】：

视情况而定。我们不知道所有的可能性。 clickedAnswer 可以（a）两个类“错误”和“正确”吗？，（b）既不是“错误”也不是“正确”？两者似乎都不太可能，但除非我们被告知，否则我们无法确定。

标签： javascript jquery function duplicates code-duplication

【解决方案1】：

this.clickedOnAnswer = function(clickedAnswer) {
  $(clickedAnswer).removeClass('bg-light text-dark').addClass('text-white bg-' + ($(clickedAnswer).hasClass('wrong')? 'danger' : 'success'));
}

button {padding:3px 7px}
.bg-light {background:#fec}
.text-dark {color:#333}
.bg-danger {background:red}
.bg-success {background:green}
.text-white {color:#fff}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="wrong bg-light text-dark" onclick="clickedOnAnswer(this)">Wrong</button>

<button class="right bg-light text-dark" onclick="clickedOnAnswer(this)">Right</button>

【讨论】：