Question

我有一个在页面上使用~~ 120次的类。我想改变 margin-bottom 只有在影响该类的其他事情符合某个标准时才会改变。下面代码的问题在于它改变了与该类相关的所有内容......而不仅仅是那些符合标准的内容。

if (actualCharacters > charactersCanFitInContainer) {
  $("#Full .t16").each(function () {
    $(this).css('margin-bottom', '1.25em');
  });

  $("#Full .t8").each(function () {
    $(this).css('margin-bottom', '4.4175em');
  });
}

Answer 1

我想帮助你解决问题，但前提是错误的。你不应该试图在jQuery中这样做。也许你的CSS有问题，最好尝试用CSS解决它。

话虽如此，让我们回顾一下代码中的一些问题：

（1）不要使用$（选择器）.each（）

当你调用jQuery

时

$( selector );

这个小家伙返回一个与选择器的css匹配的所有元素的数组。

除非您倾向于以独特的方式明确更改每个元素，否则可能有200个元素，甚至一千个，但永远不会进行.each()调用。

$( selector ).each()在匹配的选择器数组上运行for循环，如果匹配的集合太大，将给您带来性能问题。

要更改所有匹配的元素，您只需执行此操作：

$( selector ).css('margin-bottom', '1.25em');

Read more about .each()

（2）不要使用Javascript（或jQuery）来做CSS的工作

从您的问题来看，您似乎遇到间距问题。 CSS有一个number of ways来解决此问题，使用overflow，white-space，text-overflow之类的规则，您应该在使用脚本之前进行探索。

（3）避免使用.css（）

您应该避免使用$( selector ).css()函数，因为它还会引入性能问题，尤其是在大型集合上。相反，您应该创建一个可以应用于集合并使用的类：

$( selector ).toggleClass( 'myclass' );
//or 
$( selector ).addClass( 'myclass' ); //and 
$( selector ).removeClass( 'myclass' );

因为这些功能更具性能。

为了更进一步，不要对每个匹配元素集应用一个类，而是将该类添加到父元素，让子元素从更新的父类继承它们的样式。

详细了解toggleClass()

（5）坚持惯例

虽然在命名CSS规则时使用大写字母是完全可以的，但您应该避免这样做，因为它不是标准做法。拥有标准实践的关键在于每个人都可以查看代码并确切了解正在发生的事情，这使您的代码更易于调试和共享。

（6）不要试图通过过度设计的解决方案来弥补糟糕的设计

另外考虑一下，如果您的唯一解决方案是编写样式脚本，有时需要更改需求。

我遇到过项目经理想要完成的事情在技术上不可行的情况。如果他们想要在有限的区域内显示大量文本，他们需要允许滚动条之类的内容或考虑对文本块保持标准大小限制。

回到这个项目的利益相关者，并告诉他们他们想要做的事情是不合理的，并一起做出决定来更好地设计这个小部件。

作为一名开发人员，你不应该考虑不合理的要求，有些事情只需要重新设计，而不是让你想出一种解决不良设计的混乱方法。

<强>结论

就您的问题而言，请使用专门解决您所遇到的间距问题的CSS规则（溢出，文本溢出等）。您可能需要深入了解样式以找到更好的方法来实现此目的。

Answer 2

如果有人偶然发现这个问题和答案，我想发布我最终做的事情 - 特别感谢Qodeninja让我直截了当。

不是通过javascript更改CSS，而是使用简单的@media查询来处理下面的各种字体和间距更改。响应式设计有多种不同的方法。这最符合我的要求

@media all and (max-width: 1500px) 
{
    body
    {
        font-size:1.1em;
    }
    #Full
    {
        width:1200px; 
        background-color:Blue;
    }
    .theTeams
    {
        width:8.925em;
        padding-left:.238em;
        padding-right:.238em; 
    }
    .t8{margin-bottom:4.75em;}
    .t4{margin-bottom:11.75em;}
    .t2{margin-bottom:26.5em;}
    .tend{margin-bottom:0em;}
    .rtR{margin-left:19em;}

@media all and (max-width: 1200px) 
{
    body
    {
        font-size:0.9em;
    }
    #Full
    {
        width:900px; 
        background-color:Orange;
    }
    .theTeams
    {
        width:7.75em;
        padding-left:.14em;
        padding-right:.14em;
        height:2.1em;   
    } 
    .t8{margin-bottom:4.95em;}
    .t4{margin-bottom:12.25em;}
    .t2{margin-bottom:27.75em;}
    .tend{margin-bottom:0em;}
    .rtL{margin-left:16em;}     
}

javascript，改变类，但只有当它符合某些标准时

2 个答案: