Set CSS attribute based on condition

Question

I have a condition below which sets a CSS grid class based on the usecase length below:

jQuery(".uc"+useCases).addClass((landingPageData.description.useCases.length == 2) ?  'ibm-col-12-6' : 
 (landingPageData.description.useCases.length == 3) ? 'ibm-col-12-4' : 'ibm-col-12-3').attr('style','display:block');

Using the same method I want to add a width of % to a CSS class .ibm-columns based on the same above condition.

Below syntax is just a representation but I need the proper syntax

jQuery(".ibm-columns").css((landingPageData.description.useCases.length == 2) ? 'width: 60%;' : 
 (landingPageData.description.useCases.length == 3) ? 'width: 70%;' : 'width: 95%;');

Given you are already adding the classes, why not use CSS to apply the style directly to those classes, rather than setting styles in JS? — DBS
– DBS, Commented Jul 23, 2020 at 10:06
@here any reason why the question is downvoted ? Would help posting the reason too — Suraj Prasad
– Suraj Prasad, Commented Jul 23, 2020 at 10:10
Look a the first two comments. Basically it is not clear what the problem is. — mplungjan
– mplungjan, Commented Jul 23, 2020 at 10:14
"Below syntax is just a representation but I need the proper syntax"- The line of code doesnt work. Hope its clear @Mitya — Suraj Prasad
– Suraj Prasad, Commented Jul 23, 2020 at 10:16

Rory McCrossan · Accepted Answer · 2020-07-23 10:06:15Z

2

The issue is your syntax. css() accepts two arguments, the rule name and its value, yet you supply them both as a single string.

To fix this supply the values in an object:

jQuery(".ibm-columns").css((landingPageData.description.useCases.length == 2) ? 
   { 'width': '60%' } : 
   (landingPageData.description.useCases.length == 3) ? 
      { 'width': '70%' } : 
      { 'width': '95%' });

I would also suggest you break the ternary out to store the value in its own variable and supply that to css() to make the code more readable:

let width = landingPageData.description.useCases.length == 2 ? '60%' :
    landingPageData.description.useCases.length == 3 ? '70%' : '95%';

jQuery(".ibm-columns").css('width', width);

answered Jul 23, 2020 at 10:06

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

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

Collectives™ on Stack Overflow

Set CSS attribute based on condition

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related