1

我有一个在页面上使用 ~~120 次的课程。仅当影响该类的其他事物满足特定标准时，我才想更改边距底部。下面代码的问题在于它改变了与该类相关的所有内容......而不仅仅是符合标准的那些。

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

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

2 回答 2

3

我想帮你解决你的问题，但前提是错误的。您不应该尝试在 jQuery 中执行此操作。也许你的 CSS 有问题，最好尝试使用 CSS 解决它。

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

(1) 不要使用 $( 选择器 ).each()

当你调用 jQuery

$( selector );

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

可能有 200 个元素，甚至 1000 个元素，但永远不会.each()调用，除非您倾向于以独特的方式显式更改每个单独的元素。

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

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

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

阅读更多关于 .each()

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

从您的问题来看，您似乎遇到了间距问题。CSS 有多种 方法可以使用诸如,之 类的规则来解决此问题 ，您应该在使用脚本之前对其进行探索。overflowwhite-spacetext-overflow

(3) 避免使用 .css()

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

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

因为这些功能更高效。

更进一步，不要将类应用于每组匹配元素，而是将类添加到父元素并让子元素从更新的父类继承样式。

阅读更多关于toggleClass()

(5) 遵守约定

虽然在命名 CSS 规则时使用大写字母是完全可以的，但您可能应该避免这种做法，因为这不是标准做法。拥有标准实践的全部意义在于，每个人都可以查看您的代码并确切知道发生了什么，这使您的代码更易于调试和共享。

(6) 不要试图用过度设计的解决方案来弥补糟糕的设计

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

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

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

作为一名开发人员，你不应该允许不合理的要求，有些东西只需要重新设计，而不是让你想出一个乱七八糟的方法来解决糟糕的设计。

结论

就您的问题而言，请使用专门解决您遇到的间距问题的 CSS 规则（溢出、文本溢出等）。您可能需要更深入地研究样式以找到更好的方法来做到这一点。

于 2013-02-07T19:47:46.123 回答
0

万一有人偶然发现这个问题和答案，我想发布我最终做了什么——特别感谢 Qdeninja 让我直截了当。

我没有通过 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;}     
}
于 2013-04-17T15:12:09.590 回答