根据循环横幅中的行数将样式应用于跨度

Question

上下文

以下是我一直在使用的jsfiddle：http://jsfiddle.net/21r7uvgx/

对于上下文，我使用http://malsup.com/jquery/cycle/basic.html在<a>包装器中的每个.custom-banners周围进行旋转横幅循环。我把脚本作为jsfiddle中的外部资源。

起点

我们的想法是让每个具有多行（仅来自窗口大小）的span应用样式A，而只有一行的span应用样式B.调整窗口大小会改变每个样式{{1} }得到。

我根据假设为了实现我想要的目标，而不是span，我需要定位一个默认情况下显示为块的元素。

问题和目标

我遇到的问题，使用循环脚本，不可见的a高度为0，因此数学不是是的，即使span变得可见，它也不会应用正确的样式。

目标是找到一种方法让它在span变得可见时检查，并应用正确的样式。

奖金目标

如果有更好的方法来计算线高并确定需要应用的样式，我也会喜欢这些建议。

之前我正在使用它，但是当我手动调整窗口大小时，它非常错误。

span

Answer 1

试试这个javascript。我已经从你链接的jsfiddle编辑了你的javascript。如果您不想更改字体颜色（如在jsfiddle中）并且只想更改字体大小，请执行相应的操作。将以下代码复制粘贴到jsfiddle并验证。

$(document).ready(function () {

    $(window).on("resize", function () {
        $('.custom-banners span').each(function () {
            var lineheight = 20;
            var divheight = $('.banner-link').height(); 
            if (divheight > lineheight) {
                $(this).css('color', 'red');
            } else {
                $(this).css('color', 'green');
            };
        });
    });
});