Question

How to shuffle css rule of div id using javascript ternary operator where condition is set into jquery variable “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>

As stated above my class shuffles horizontal to vertical for particular color value of "my_color" as condition. for same condition I want to shuffle float of list item from left with horizontal to none with vertical.my css style-sheet contain list item “#my_div li”.

css:

#my_div li{float:left}

And how can I shuffle multiple css for using same ternary conditional operator?

Answer 1

Is something like this what you mean ?

<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>