Question

我有一个条件，可以根据下面的usecase长度设置CSS网格类：

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');

使用相同的方法，我想基于上述相同条件，将％的宽度添加到CSS类.ibm-columns中。

下面的语法只是一种表示形式，但我需要正确的语法

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

Answer 1

问题在于您的语法。 css()接受两个参数，即规则名称及其值，但您都将它们作为单个字符串提供。

要解决此问题，请提供对象中的值：

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

我还建议您将三元数分解为将值存储在其自己的变量中，并将其提供给css()，以使代码更具可读性：

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

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

根据条件设置CSS属性

1 个答案: