使用 JavaScript 三元运算符的 CSS 规则答案

【问题标题】：CSS rule using JavaScript ternary operator使用 JavaScript 三元运算符的 CSS 规则
【发布时间】：2013-01-15 10:33:02
【问题描述】：

如何使用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" 的特定颜色值作为条件将水平随机播放到垂直。对于相同的条件，我想将列表项的浮点数从left 和horizontal 改组到none 和vertical.my css 样式表包含列表项“#my_div li”。

css:

#my_div li{float:left}

我怎样才能使用相同的三元条件运算符来洗牌多个 css？

【问题讨论】：

标签： javascript jquery css ternary-operator

【解决方案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>

【讨论】：

不客气。那么，你接受我的回答了吗？如果是这样，如果不是太麻烦，请点击绿色勾号！
是的，克里斯！只是在等待更多建议。

【解决方案2】：

为什么不为此使用 CSS：

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

【讨论】：

我可以像 urs 一样添加它，但我想为相同的情况添加更多的 css 规则。