javascript，仅在满足特定条件时才更改类

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) 不要使用 $( selector ).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) 不要试图用过度设计的解决方案来弥补糟糕的设计

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

我遇到过元素经理想要完成的事情在技术上不可行的情况。如果他们希望在有限的区域中显示大量文本，则需要允许使用滚动条或考虑对文本 block 保持标准大小限制。

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

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

---

结论

就您的问题而言，尝试使用专门解决您遇到的间距问题(溢出、文本溢出等)的 CSS 规则。您可能需要更深入地研究样式以找到执行此操作的更好方法。