CSS rule using JavaScript ternary operator

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?

Cris Stringfellow · Accepted Answer · 2013-01-31 12:43:32Z

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>

edited Jan 31, 2013 at 12:43

answered Jan 31, 2013 at 10:47

Cris Stringfellow

3,81628 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Cris Stringfellow Over a year ago

You are welcome. So, you accept my answer then? If so, please click the green tick if it's not too much trouble!

galexy Over a year ago

yeah definitely chris ! just waiting for more suggestion.

dfsq · Accepted Answer · 2013-01-31 10:48:39Z

1

Why not use CSS for this:

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

answered Jan 31, 2013 at 10:48

dfsq

193k26 gold badges244 silver badges261 bronze badges

1 Comment

galexy Over a year ago

I can add it like urs, but I want to add more css rule for same case.

Collectives™ on Stack Overflow

CSS rule using JavaScript ternary operator

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related