Question

我已经成功实现了多个条件三元运算符来在水平和垂直之间对类进行混洗，如下所示：

jquery的：

<script type="text/javascript">
  $(document).ready(function() {
      $("#my_div")
     .removeClass("horizontal vertical")
     .addClass( ['red', 'blue', 'green', 'gray'].indexOf(my_color) != -1 ? 'horizontal' : 'vertical');
});
</script>

my_color当时可能有一个值，红色，蓝色，绿色，灰色白色和黑色。如上所述，类horizontal设置为前4个my_color值，vertical设置为其他值。现在我想添加和删除第三类elliptical，其中水平，垂直和椭圆设置仅为my_color的2个值。如何修改上面的脚本或使用switch语句实现相同的？

Answer 1

您可以使用toggleClass和一个开关轻松添加/删除类：

$(document).ready(function() {
   var colors = ['red', 'blue', 'green', 'gray'];
   $("#my_div")
      .toggleClass('horizontal', colors.indexOf(my_color) != -1)
      .toggleClass('vertical', colors.indexOf(my_color) == -1)
      .toggleClass('elliptical', [colors[0], colors[1]].indexOf(my_color) != -1);
});

如果颜色匹配数组，则添加第一个类，如果不匹配，则添加第一个类，第二个相反，如果颜色匹配第一个或第二个数组值，则添加第三个类。并非所有浏览器都支持array.indexOf，您应该使用polyfill。

如何在JavaScript三元运算符中混洗多个值

1 个答案: