javascript - 避免在jQuery中进行二分类类切换的最佳实践

我在javascript类中编写了一个方法。如果相同的div包含正确的类，则该方法将按下的div着色为绿色；如果同一div包含错误的类，则为红色。函数（或方法）通过另一个称为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');
}

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

最佳答案

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>

关于javascript - 避免在jQuery中进行二分类类切换的最佳实践，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48726149/