2

我有一个 jQuery 函数，可以重新调整页面中许多元素的字体大小和行高，包括 p 和 p.latest_news。除了 p.latest_news 之外，该函数对所有其他元素都按预期工作

应用于 p.latest_news 的 font-size 和 line-height 等于 p no class (ie $('p').css({...)

jQuery.1.7.1

代码

    $('p.article_news').css({
            'font-size' : Math.max(11,(.9 * newFontSize)),
            'line-height' : Math.max(13,(1.1 * newFontSize))+'px'
            });
    $('p').css({
            'font-size' : Math.max(14,newFontSize),
            'line-height' : Math.max(21,(1.7 * newFontSize))+'px'
            });

如果我只使用

    $('p.article_news').css({
            'font-size' : Math.max(11,(.9 * newFontSize)),
            'line-height' : Math.max(13,(1.1 * newFontSize))+'px'
            });

p.article_news 字体大小和行高按预期更改

为什么会这样？我如何影响每个 p、class 和 classless？

谢谢

4

4 回答 4

4

您正在设置 article_news 字体大小，然后使用第二个选择器再次更改它。

你需要的是：

$('p.article_news').css({
        'font-size' : Math.max(11,(.9 * newFontSize)),
        'line-height' : Math.max(13,(1.1 * newFontSize))+'px'
        });
$('p:not(.article_news)').css({
        'font-size' : Math.max(14,newFontSize),
        'line-height' : Math.max(21,(1.7 * newFontSize))+'px'
        });

:not() 选择器基本上选择了所有没有类 .active_news 的 p 节点。

于 2012-09-07T21:11:55.950 回答
1

只需翻转您的功能。首先使用带有 p 选择器的函数，然后使用带有 p.article_news 选择器的函数。

您的 p 选择器函数覆盖了 p.article_news 选择器函数。

于 2012-09-07T21:14:35.507 回答
1

我喜欢马克的解决方案。

但是如果这两个函数一起调用，你可以翻转它们并让它们工作。

$('p').css({
            'font-size' : Math.max(14,newFontSize),
            'line-height' : Math.max(21,(1.7 * newFontSize))+'px'
            });
$('p.article_news').css({
            'font-size' : Math.max(11,(.9 * newFontSize)),
            'line-height' : Math.max(13,(1.1 * newFontSize))+'px'
            });

可能比检查更快:not

于 2012-09-07T21:19:38.420 回答
0

您正在覆盖您在设置样式时添加的p.article_news样式，p因为所有样式p.article_news都是p. 您可以先设置样式，p然后设置p.article_news，也可以使用p:not(.article_news)代替p。

于 2012-09-07T21:13:23.447 回答