javascript - 使用 JavaScript 三元运算符的 CSS 规则

Question

如何使用javascript三元运算符对div id的css规则进行洗牌，其中条件设置为jquery变量“my_color”

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"as 条件的特定颜色值，我的班级从水平到垂直洗牌。对于相同的条件，我想将列表项的浮动从withleft到horizontal.my css 样式表包含列表项“#my_div li”。nonevertical

CSS：

#my_div li{float:left}

以及如何使用相同的三元条件运算符对多个 css 进行洗牌？

Answer 1

你的意思是这样的吗？

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

Answer 2

为什么不为此使用 CSS：

.horizontal li {
    float: left;
}
.vertical li {
    float: none;
}